By

Debugging AngularJS End to End Tests in Intellij IDEA using Protractor

I have started using Protractor to run my end to end (e2e) tests for AngularJS, but information on how to debug in an IDE is somewhat sparse being this is such a new framework. After some tinkering I have breakpoints working!

If you need to debug your e2e tests in IntelliJ IDEA (also Webstorm will be similar) you need to do the following:

  1. You will need to be using NPM to manage your dependencies (like grunt, bower, yeoman, etc.). If you aren’t, you should seriously consider looking into it as it simplifies JS development immensely.
  2. If you haven’t already done so, install the Node.js IntelliJ IDEA plugin. You can do this via the plugins browser within IDEA.
  3. In your project, add a new debug configuration for Node.js
  4. If not pre-populated, enter your path to your node installation. It should be something like ‘~/.nvm/v0.10.12/bin/node’
  5. Update your working directory to the root of your Angular app, i.e. where you would run your Protractor tests from the command line.
  6. Enter the path to your protractor cli.js file (relative to your working directory). e.g. ‘node_modules/protractor/lib/cli.js’
  7. For the application parameter, enter your protractor config file, e.g. test/protractor.conf.js

Debugging will run the tests and pause at any breakpoints set in IntelliJ!

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

End to End Testing with AngularJS, Protractor, Grunt and Maven

I recently set up end to end (e2e) testing for an angular app we are developing. We had a couple of requirements and thought I should share this as it wasn’t completely straightforward

  1. We want to test using our current application container (Tomcat 7). As part of this, we have to deploy another war which contains the API’s the angular app uses.
  2. We want the tests to be standalone (i.e. portable) and not rely on a current tomcat install.

Use Maven3 to Build

The API is java based and we currently use Maven3 to build the deployable artifact, so it is a natural choice as our primary build tool. We are currently using grunt for building our app and running tests so we need to create a pom and trigger the grunt build:

This will build an artifact ROOT.war and it is packaging the dist directory which contains our built application, which we are already building with grunt.

We also want to run npm install to ensure our dependencies are correct. To do this, we will use the maven exec plugin.

We also want to clean the relevant directories before building, so we can use the maven clean plugin

This cleans out both the dist folder and the node_modules folder, ensuring we haven’t forgotten to save one of our npm dependencies at some point.

Next we build the app. We want to use maven exec for this as well, so add a new execution to the the plugin we used for npm install:

This occurs in the same phase, so ensure it happens after npm install by putting it second.

Now you should be building a deployable artifact called ROOT.war.

Installing and Using Protractor

Protractor is the new e2e testing framework for AngularJS, and is fairly new to the scene. Up until recently, Karma was used however the project recommends using this in preference if you are starting a new project.

Install protractor using npm

You should then be able to run protractor on the command line. You now need a config file. I personally keep it in the test/ directory.

e2e.conf.js

I am keeping my test files in test/e2e, and the path is relative to the config file.

Protractor needs selenium to run (as you may see in the config) so go ahead and install that as well. You may need to change the version of selenium. Also, I am testing against port 9090 so the standalone server doesn’t interfere with my local testing.

And chromedriver so we can test against chrome

Create a new test for your app (check out the documentation for more on this)

and we can now run protractor

which should start and execute.

 Integrate Protractor with Grunt

We want to create a new task to run independent of the main build as it will be executed after the war is packaged and the tomcat server starts.

Within grunt.initConfig() you need to inser the following:

I create two different profiles so I can run against my local dev server as it is much faster to run. You will want a separate config file for this, or you could pass through the port number through as a parameter.

Add the two tasks and now you can run either with the following:

Configure Standalone Tomcat 7 Instance

This script is designed to be portable, so Tomcat should be started prior to the integration tests. In your pom.xml run the tomcat7 maven plugin

The comments should guide you through here.

Integrate Protractor with Maven

Now for the final step, triggering the protractor build when you run your maven build during the integration-test phase. This is another job for the maven exec plugin:

That should be it!

Your protractor tests should run once tomcat starts and the server should shutdown afterwards.

 

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Save the NBN – Australia needs Fibre to the Premises.

No-one with an ounce of common sense wants FTTN over FTTP.

It will far be slower, and, over the life, will cost far more.

I think we need a massive amount of support to stop this as the LNP will see the recent election as a mandate to dismantle the NBN, and given the Murdoch press support of them, they almost certainly have been given their orders to cripple speeds to maintain Foxtel.

We need to show that this is Not what the country wants. Sign the below petition please!

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Finished Postgraduate Studies!

I have finally finished some postgraduate studies while working so I have been quite busy. I am planning on getting some new articles up and I am also working on a expanded and updated Fetch That Number, including Yellow Pages integration!

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

New look for the site!

I have updated the site with a new responsive theme and dropped the separate mobile theme (that I was never particularly happy with).

Everything should now scale to the device size.

If you experience any problems or notice anything out-of-place, let me know!

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Fetch That Number 1.6.6 Released

An update to Fetch That Number is out.

It addresses some customer feedback on the Samsung Galaxy Note with Jellybean. Location of number info is now configurable to top or middle as Jellybean on the Samsung Galaxy Note displays caller info at the top of the screen.

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Fetch That Number 1.6.0 Released

Fetch That Number Logo

Fetch That Number

Version 1.6.0 has been released and addresses a number of bugs, primarily to do with restarting the app, parsing addresses, viewing history and performance enhancements.

Also the look and feel has been updated slightly!

Comments, bugs or suggestions welcome!

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Fetch That Number 1.5.4 released

Fetch That Number Logo

Fetch That Number

The newest version of Fetch That Number has been released, the Reverse Lookup/Grey Pages search app for Android.

It’s been a bit silent of late working towards Yellow Pages integration! This release addresses some bugs experienced by users. This fixes two bugs when re-opening the details screen.

To get the new version, update or install via the Android Market

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Easytracker – Google Analytics integration for Android

Easytracker is a library that makes analytics integration easier. It handles session management and can automatically track activity views.

It is pretty simple to integrate, just download the zip and add the EasyTracker.jar into your project. If you are using fragments (I will cover that later) or would like to have to source on hand, you can download the source distribution and include it as a project on the build path.

Account Setup

If you don’t already have an account for Google Analytics you should do that now, then setup a profile for your Android application. In the dropdown next to ‘Website’s URL:” you can select “Not a website”. You will need your tracking code, so note that down somewhere for later.

Configuration

Configuration is pretty simple, just need to add a few lines to your strings.xml file, and add permissions in ApplicationManifest.xml (if they already don’t exist). The following is where you set your tracking code:-

The next few are optional.

If you wish to check what is being logged you can enable debug. As results don’t appear for 24 to 48 hours, this can be handy for initial setup.

If you want your activities to be tracked automatically, you can set the following:-

You can configure how frequently (in seconds) information is sent to google, with the following:-

In ApplicationManifest.xml you should ensure you have the following permissions

Setting Up Tracked Activities

All activities you wish to track should extend TrackedActivity rather than Activity, TrackedListActivity rather than ListActivity.

You can track activities automatically by extending from these classes and setting the config option ‘ga_auto_activity_tracking’ to true. If you want to manually track, e.g. if you are using fragments, you should do this in, or after onStart(). Ensure you have invoked the  super.onStart() else you will get NullPointerExceptions.

Fragment Support

I am using fragments in my app and currently you can only extend from TrackedActivity which extends Activity. You can get around this easily enough by making a copy the TrackedActivity class (I renamed it to TrackedFragmentActivity so it doesn’t clash) and changing its extends clause to the relevant FragmentActivity implementation (don’t forget to use the Support class if you are using the compatibility library). You will likely have to comment out an overridden method: onRetainNonConfigurationInstance() as it is marked as final in FragmentActivity and cannot be overridden.

Sending Events

You can also send events such as button clicks

The parameters being category, action, label and value.

UPDATE: I noticed that things weren’t being logged to analytics, and the clue was the following:-

07-24 16:19:11.558: V/GoogleAnalyticsTracker(13431): dispatching hits in dry run mode

I needed to add another config option:-

now I see the expected:

07-24 16:29:01.711: V/GoogleAnalyticsTracker(13697): HTTP Response Code: 200

Also, here is a good write-up on troubleshooting Google Analytics and EasyTracker

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin

By

Fetch That Number Version 1.5.1 Released

Fetch That Number Logo

Fetch That Number

The newest version of Fetch That Number has been released, the Reverse Lookup/Grey Pages search app for Android.

To get the new version, update or install via the Android Market

 

 

New Features:

  • Caller History – You can now see your recently fetched contacts and call, add or ignore them
  • Ice Cream Sandwich support – style and actionbar integrated
  • Tablet Support – you can now search from your Android Tablet.
  • Enable/Disable auto-fetch – going overseas? No problem, just change in the settings.
  • Share Fetch That Number using your favourite social network, email, etc.

 

Share this article...

facebooktwittergoogle_plusredditpinterestlinkedinfacebooktwittergoogle_plusredditpinterestlinkedin