Back

TechnologyNov 12, 2014

Testing With AngularJS Part 4: Setting up E2E Testing With Protractor

Maria Knabe

During the first three parts of this series about testing with AngularJS, we have set up unit tests with Karma and used Grunt to automate running these tests. Now we are going to set up end-to-end (E2E) testing with Protractor. (If you missed any of the previous posts you can find them by clicking the following links: Part 1, Part 2, Part 3.)

While unit testing focuses on testing small pieces of code at a time, E2E testing is used when you want to test that integrated components work correctly together. In this post, I will explain how to set up Protractor and a Selenium standalone server for E2E testing with your Angular app.

What Is Protractor?

According to the documentation,

Protractor is an end-to-end test framework for AngularJS applications built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Automating tests against a real browser is great for ensuring your application behaves as expected. Protractor works well with Angular and allows you to easily grab elements by looking for Angular attributes like ng-model or a binding. Then you can use these elements for testing. This way you do not have to rely on finding elements using id or class selectors.

Example Project

As a reminder, a complete example project can be found on GitHub. I added additional unit tests and E2E tests to the TodoMVC AngularJS app. You can run grunt e2e-test in the app directory to see some of what I will describe in this article.

Installation

You can install Protractor locally or globally using Node Package Manager (NPM). Also download the Selenium standalone webdriver. This is what will automate the browser to run your tests. The following command adds the Selenium jar file and chromedriver to the node_modules/protractor/selenium directory.

Install locally

# Install protractor npm install protractor --save-dev

download the selenium standalone server

./node_modules/protractor/bin/webdriver-manager update

Install globally

# Install protractor npm install protractor -g

download the selenium standalone server

webdriver-manager update

Note: The –save-dev option saves the package as a dev dependency to the package.json file

Configuration

Create a file called protractor-conf.js in the test directory and add the following configuration to it.

The Selenium webdriver has the ability to execute tests against multiple browsers concurrently, making cross-browser testing easy. Protractor has a sample config file available with all the configuration options.

If you installed Protractor locally, be sure to set the seleniumServerJar and chromeDriver options with the location of these files.

exports.config = { // location of the Selenium JAR file and chromedriver, use these if you installed protractor locally // seleniumServerJar: '../node_modules/protractor/selenium/selenium-server-standalone-2.40.0.jar', // chromeDriver: '../node_modules/protractor/selenium/chromedriver',

// location of your E2E test specs specs: [ '../test/e2e/*.js' ],

// configure multiple browsers to run tests multiCapabilities: [{ 'browserName': 'firefox' }, { 'browserName': 'chrome' }],

// or configure a single browser /* capabilities: { 'browserName': 'chrome' } */

// url where your app is running, relative URLs are prepending with this URL baseUrl: 'http://localhost:9000/',

// testing framework, jasmine is the default framework: 'jasmine' };

Notice that the baseUrl does not determine the location of your app. It just determines relative URLs. If you call browser.get(‘/’) in your Protractor tests, this will redirect to your baseUrl.

Running a Web Server

Before you can run your tests, your app will need to be running on a web server. Otherwise, Protractor will have no way to execute your tests against your app. Skip to the next section if you already have a server running.

You can set up a simple web server using the http-server Node package. If you are using Grunt in your project, see the next post, which explains how to connect to a web server using Grunt.

Install the package

npm install http-server --save-dev

Add the following configuration to your package.json file.

"scripts": { "start": "http-server ./app -a localhost -p 9000" }

Now if you run the npm start command and go to http://localhost:9000/, you should see your app running.

Executing Tests With the Command Line Interface 

Once you have a server running, make sure its location is set as the baseUrl in your protractor-conf.js file. Now you are ready to run your tests using the webdriver-manager and protractor command line interfaces.

Run the following commands in three separate console windows. Be sure to use the correct commands if you installed Protractor locally or globally.

# Protractor installed locally npm start ./node_modules/protractor/bin/webdriver-manager start ./node_modules/protractor/bin/protractor test/protractor-conf.js

protractor installed globally

npm start webdriver-manager start protractor test/protractor-conf.js

If everything worked, you should see the following output. You will also see a browser window open and your tests will start. It can be very satisfying to see Protractor running through your entire app.

After the tests are finished, you will see the results for each browser.

Note: If you are using Grunt with your application, see the next post in this series for an explanation on setting up Protractor and Grunt.

Conclusion

E2E testing with Protractor is a great way to test what a user will actually see in a browser. You can also test across different browsers. In the next post, I will explain how to set up Protractor and Grunt to automate the process even more.

Sources