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
