Moving from Selenium to Protractor for Test Automation

Protractor is an end-to-end Testing Framework for testing Angular as well as AngularJS applications. It helps you runs tests against your application running in a real browser, interacting in exactly the same way a user would. The first version of Protractor was released in the month of July 2013, when the framework was just a prototype of a particular testing framework. Google, however, with the support of the testing community, is evolving the framework to follow the evolution of AngularJS and to meet the needs of the community that is using AngularJS.

Why use Protractor over Selenium?

Test Your Application like a User

Protractor framework is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application exactly like a user would. It is based on Behaviour Driven approach which allows even a non automation tester to test the application without expertise in automation tool. Example –

describe(‘angularjs homepage’, function() {
it(‘should greet the named user’, function() {
   // Load the AngularJS homepage.
   browser.get(‘http://www.angularjs.org’);
   element(by.model(‘yourName’)).sendKeys(‘Julie’);

var greeting = element(by.binding(‘yourName’));

// Used to assert that the text element has the required expected value.
// Protractor patches ‘expect’ to understand promises.

expect(greeting.getText()).toEqual(‘Hello Julie!’);
});
});

Advantages over Selenium

JavaScript automation frameworks involve working on asynchronous execution, callbacks, anonymous functions and promise, which is a sequential activity just like finding an object and perform operations on it. Another advantage of transitioning to Protractor/JavaScript is that both the application and the test codebase would be written in the same language.

For Angular Apps

Protractor provides support for Angular-specific locator bindings, which allows you to test Angular-specific web elements without any need for additional setup effort. It has extra locators compared to selenium webdriver. Examples include model, repeater, binding etc.

Angular JS applications have some extra HTML attributes like ng-repeater, ng-controller, ng-model which are not included in Selenium locators. Selenium is not able to identify those web elements using today used Selenium code. Protractor on top of Selenium can handMoving from Selenium to Protractor for Test Automationle and control these operations in Web Applications.

Example –

element(by.model(‘locator’)).sendKeys(‘text’);
element(by.binding(‘locator’)).click();

Automatic Waiting

When it comes to waiting for elements on a web page, there is no need to add waits and sleeps to your test. Protractor automatically executes the next step in your test the moment a webpage finishes all pending tasks. There is no need to worry about waiting for your test and webpage to sync in. Protractor, moreover, also speeds up your testing as it avoids the requirement for a lot of “sleeps” and “waits” in your tests, which in turn optimizes sleep and wait times.

Supports Extensibility

Since protractor is a node.js application, can utilize the wide variety of packages that are available in the node. One can extend the framework or add additional features by installing node packages. For example, if you need HTML report you can just use Jasmine HTML Reporter for the clean code you can install eslint or tslint. Likewise, you can install node packages of your choice.

Supports Control Flow

Application Programming Interface (API) is based on promises, which are managed by control flows and adapted for Jasmine. Protractor APIs are purely asynchronous. It maintains a queue of pending promises, called the control flow, to keep execution organized.

Asynchronous Behavior

Works on NodeJS, so that the asynchronous process helps to speed up the execution.

Here is how you can achieve it.

1) Promise Manager/ Control Flow

It is an abstraction that makes every action to be called one by one, like a queue. Every action returns a special object – Promise. These represent the result of async operation.

2) Second way – async/await

It is new abstraction around promises objects and allows easily chaining actions one by one. The advantage in this is native language construction, instead of Promise Manager, which makes your code look like synchronized, with try/catch and other familiar constructions.

describe(‘angularjs homepage’, function() {
it(‘should greet the named user’, async function() {
   await browser.get(‘http://www.angularjs.org’);
   await element(by.model(‘yourName’)).sendKeys(‘Julie’);
   var greeting = element(by.binding(‘yourName’));
   expect(await greeting.getText()).toEqual(‘Hello Julie!’);
});

“await” is like “suspend code execution until a promise returned from the action is resolved”.

Images and Screenshots

Image comparison is very easy in protractor and it works great. Protractor helps you take screenshots on demand and create them in any place needed. You just need to specify the type of Reporter that you want to use.

Example –

jasmine.getEnv().addReporter(new HtmlReporter(){
this.specDone = function(result){
if(result.failedExpectations.length > 0){
//take Screenshot
}
}
}

Conclusion/ Summary

There is a big world of Protractor out there and there are hundreds of packages available in the market offered by NPM to add more features to your test in addition to simple test scenarios.