TechnologyNov 19, 2014

Testing With AngularJS Part 5: Protractor and Grunt

Maria Knabe

This is the final post in my series about testing AngularJS apps.  Here’s a quick summary of the ground we have covered:

  • Parts One, Two, and Three: Configure Karma for unit testing and automate the execution of the unit tests using Grunt as part of a build process.

  • Part Four: Configure Protractor to run your end-to-end (E2E) tests.

In this final post, I will explain how to set up Grunt and Protractor to execute your E2E tests as part of a build process.

Be sure to check out the example app for a full, working implementation.

executing tests with grunt

To run your E2E tests with Grunt, you will need to have Grunt installed. Also install the grunt-protractor-runner plugin.

# Install Grunt globally npm install -g grunt-cli   # Install Grunt Protractor plugin npm install grunt-protractor-runner --save-dev

Configure this plugin in your Gruntfile.js. I set up two targets. One target called e2e will stop the build if a test fails. Another called continuous will be used with grunt-watch to keep the build alive and re-run tests when changes are made. I explain how to set up grunt-watch in the next section.

protractor: { options: { // Location of your protractor config file configFile: "test/protractor-conf.js",   // Do you want the output to use fun colors? noColor: false,   // Set to true if you would like to use the Protractor command line debugging tool // debug: true,   // Additional arguments that are passed to the webdriver command args: { } }, e2e: { options: { // Stops Grunt process if a test fails keepAlive: false } }, continuous: { options: { keepAlive: true } }}

optional: set up a web server with grunt-contrib-connect

As I mentioned in the previous post, your app needs to be running on some sort of web server where Selenium can point to run tests against.

If you already have a web server, you do not need to install this plugin—though it can be helpful for local development and you will not have the additional step of starting your server.

If you have not set up a server, you can use the grunt-contrib-connect plugin to start a running web server. The example project uses this plugin. In the example project, we are connecting to a server at http://localhost:9000/ and pointing Selenium to this location.

# Install grunt plugin npm install grunt-contrib-connect --save-dev

To configure the connect task, give a port number and hostname.

connect: { options: { port: 9000, hostname: 'localhost' }, test: { options: { // set the location of the application files base: ['app'] } }}   grunt.loadNpmTasks('grunt-contrib-connect');

Register a new grunt task that connects to the server and runs protractor.

grunt.registerTask('e2e-test', ['connect:test', 'protractor:e2e']);

Now you are ready to run your tests! Run grunt e2e-test in your command line. You should see Selenium start and a browser window will pop up allowing you to see all the tests running. Depending on how many tests you have, this can take a few minutes

protractor and grunt watch

As I explained in part three of this series, grunt-contrib-watch is a powerful Grunt plugin that will run tasks and refresh the browser after certain files have been changed.

Install the grunt-contrib-watch plugin.

npm install grunt-contrib-watch --save-dev

Add the configuration for the task. Grunt watch is configured by defining an array of files to watch and an array of tasks to run when those files change. If you already have grunt watch set up, you will just need to add the configuration for the Protractor target.

watch: { options: { livereload: true }, karma: { files: ['app/js/**/*.js', 'test/unit/*.js'], tasks: ['karma:continuous:run'] }, protractor: { files: ['app/js/**/*.js', 'test/e2e/*.js'], tasks: ['protractor:continuous'] }}

Edit your e2e-test task to include the watch task.

grunt.registerTask('e2e-test', ['connect:test', 'protractor:continuous', 'watch:protractor']);

Now run grunt e2e-test again. When you make changes to JavaScript files or E2E test spec files, Grunt will re-run all your E2E tests. You will probably want to turn off of re-running your tests during regular development since it can take a while, but it can be useful when writing your tests.


Now you know how to configure Karma and Protractor with Grunt to run your unit tests and E2E tests.  As always, the example project is available and check out the other posts in this series for more information on how to configure your Angular tests.