Selenium and Protractor, both are used to automate angular applications, since protractor is specially designed for angular applications, read this blog and understand all other benefits and differences in both while moving from selenium to protractor for test automation like it includes all advantages of selenium web driver, supports parallel testing through multiple browsers.
Unleash Your Potential - Namagunga Girls Coding Club
Moving from selenium to protractor for test automation
1. 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.
2. 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.
3. Jasmine
System Architecture
Asynchronous Behavior
Works on NodeJS, so that the asynchronous process helps to speeding up the execution.
Here is how you it is achieved.
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
4. 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.