AngularJS End to End Testing using protractor

“Quality is never an accident, it is always the result of intelligent effort” . . . John Ruskin

Meet Protractor

Protractor is an end-to-end testing platform for JavaScript(AngularJS) applications integrating technologies such as NodeJS, Selenium, Jasmine, Mocha and WebDriver.

Protractor e2e Testing Workflow:

Testing System(NodeJS) — Webdriver(Selenium) — Angular App

Why not just Selenium, why do you also need Protractor?

AngularJS applications are Web Applications which uses hybrid HTML syntax to express components. In AngularJS, we find syntax such as ng-for, ng-if, ng-model and ng-repeat. These hybrid syntax are not included in Selenium locators hence Selenium is unable to identify them. However, Protractor on top of selenium can identify, handle and control these attributes. It focuses on testing the actual functionality of the AngularJS application.

Benefits of using Protractor:

If you are writing e2e tests for AngularJS applications, you need Protractor. Here’s why:

• Protractor is based on AngularJS concepts, hence easy to understand for new users with prior AngularJS knowledge.
• Protractor speeds up testing as it avoids the need for lots of ‘sleeps’ and ‘waits’ in your tests, given that it optimizes sleep and wait times.
• With protractor, you have access to a bunch of customizations from Selenium to easily create tests for AngularJS applications.
• It runs on real browsers such as Chrome and Firefox and headless browsers such as HtmlUnit and PhantomJS.

Installation and Usage

Not so fast, do you have your dependency pass?

To start using Protractor, you need to install the following dependencies:

1. Java:

Download and install Java on your machine

Note: The section below is for running selenium standalone server, If you intend to use selenium with protractor, like we plan to do, you can move on to step 2.

Follow this link to download selenium standalone java application; selenium-server-standalone-3.x.x.jar to your machine.

Start the downloaded server by double-clicking on it or via the terminal by running:

java -jar selenium-server-standalone-3.x.x.jar

2. NodeJS:

The next step is to download and install nodeJS. After installing nodeJS, open the terminal and run the command shown below to verify the node version:

node -v

If installed properly, you would see a response similar to the one shown below on the console:

v6.x.x

Congratulations, you are ready to start using protractor.

• Install Protractor

After completing the steps above, open up a terminal window and run the command:

npm install -g protractor

This will install protractor globally on your machine. To verify this installation run the following command:

protractor --version

If properly installed, you’ll get a response similar to:

version x.x.x

• Update webdriver-manager (optional but recommended)

The webdriver manager is used for running the tests for the angular app in a specific browser. You can update the webdriver-manager using the command:

webdriver-manager update

• Start webdriver-manager

Start webdriver manager to listen to tests run using protractor. Once protractor is used to run a test, the webdriver will automatically load and run the tests in the relevant browser.

To start webdriver-manager, run the following command on the terminal:

webdriver-manager start

This will start the webdriver-manager server.

After this is done, open a web browser and enter the following address in the address bar: http://localhost:4444/wd/hub this should open a web-page similar to the one below:

If you see this page, then protractor was successfully installed.

Sample AngularJS testing using protractor:

In this session we will test a simple AngularJS application deployed on the AngularJS webpage using protractor with chromeDriver.

To achieve this, we will create two files, conf.js and test-spec.js files as shown below:

conf.js

exports.config = {
  capabilities: {
    'browserName': 'chrome'
  },
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['test-spec.js']
};

test-spec.js

describe('AngularJS 2-way binding test', () => {
  it('Should bind the name you enter into the input box', () => {
    browser.get('https://angularjs.org');
    element(by.model('yourName')).sendKeys('World');
    const response = element(by.css('h1.ng-binding'));
    expect(response.getText()).toEqual('Hello World!');
  });
});

In the config file, we specify chrome as the default testing browser, this can be any real or headless browser, such as Firefox or PhantomJS.

After setting up the files, run the command below to start the e2e test using protractor:

protractor conf.js

The above command starts chrome browser and runs the test specified.

Integrating Browserstack

With browserstack we can test web applications across several browsers usually as a check of compatibility and/or responsiveness. Protractor can be integrated into browserstack to ensure the e2e test runs across several browsers. A config.js file integrating browserstack to test application on Internet explorer running on windows7 is shown below:

exports.config = {
  'seleniumAddress': 'http://hub-cloud.browserstack.com/wd/hub',
  specs: ['test-spec.js'],
  'baseUrl': <Your App Url>,
  'capabilities': {
    'browserstack.user': '<Enter Browserstack Username>',
    'browserstack.key': '<Enter Browserstack API key>',
    'os': 'Windows',
    'os_version': '7',
    'browserName': 'IE',
    'browser_version': '8.0',
    'resolution': '1024x768'
  }
};

Multi-browser Testing

“Why test on just one, when you can test on them all”

Using browserstack, we can run tests on multiple browsers simultaneously, this gives you the ability to ensure your apps performance across different browsers without having to re-write your test config. A sample config file is shown below:

exports.config = {
  'seleniumAddress': 'http://hub-cloud.browserstack.com/wd/hub',
  specs: ['test-spec.js'],
  'baseUrl': <Your App Url>,
  browserstackUser: '<Browserstack Username>',
  browserstackKey: '<Browserstack API key>',

  'multiCapabilities': [{
   'os': 'OS X',
   'os_version': 'El Capitan',
   'browserName': 'Chrome',
   'browser_version': '52.0',
   'resolution': '1280x960'
 },{
   'browserName': 'IE',
   'browser_version': '11',
   'os': 'Windows',
   'os_version': '10'
 },{
   'browserName': 'Safari'
 },{
   'browserName': 'Firefox'
 },{
   'browserName': 'iPhone',
   'platform': 'MAC',
   'device': 'iPhone 5S'
 }]
};

Conclusion

Using the steps above, we can run e2e tests on AngularJS applications using protractor and structure them to run across multiple browsers to test for compatibility and responsiveness using browserstack.

Contribute

Feel free to leave your comments and suggestions.

Further Reading

#AngularJS, #Protractor