1
Write a post

AngularJS End to End Testing Using Protractor

Published Jul 21, 2017
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 that integrate 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 that use 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 because 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 create tests for AngularJS applications easily.
  • 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

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 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 section, 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 Google Chrome as the default testing browser. Note that 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 app's 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

Discover and read more posts from Ethan Nwankwo
get started
Enjoy this post?

Leave a like and comment for Ethan

3
Be the first to share your opinion

Get curated posts in your inbox

Learn programming by reading more posts like this