SlideShare a Scribd company logo
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.
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
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.

More Related Content

PPTX
Angular 2.0: Getting ready
PPTX
Angular%201%20to%20angular%202
PPTX
AngularJS is awesome
PDF
Angular 2: core concepts
PPTX
What’s new in angular 2
PPTX
Angular js for beginners
PDF
Angular Dependency Injection
PDF
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Angular 2.0: Getting ready
Angular%201%20to%20angular%202
AngularJS is awesome
Angular 2: core concepts
What’s new in angular 2
Angular js for beginners
Angular Dependency Injection
The evolution of Angular 2 @ AngularJS Munich Meetup #5

What's hot (20)

PPTX
Introduction to AngularJS Framework
PDF
The productive developer guide to Angular 2
PPTX
Introduction to Angular js 2.0
PDF
Angular 2 - Core Concepts
PDF
PPTX
AngularJs presentation
PPTX
AngularJS Beginners Workshop
PPTX
AngularJS intro
PDF
Gettings started with the superheroic JavaScript library AngularJS
PDF
AngularJS 2.0 Jumpstart
PDF
Angular2 intro
PDF
AngularJS - What is it & Why is it awesome ? (with demos)
ODP
Introduction to Angular 2
PDF
Angular2 with type script
PDF
AngularJS: Overview & Key Features
PDF
Angular 2 overview
PDF
Angularjs - lazy loading techniques
PPTX
AngularJS: Service, factory & provider
PPTX
Angularjs PPT
PPTX
5 angularjs features
Introduction to AngularJS Framework
The productive developer guide to Angular 2
Introduction to Angular js 2.0
Angular 2 - Core Concepts
AngularJs presentation
AngularJS Beginners Workshop
AngularJS intro
Gettings started with the superheroic JavaScript library AngularJS
AngularJS 2.0 Jumpstart
Angular2 intro
AngularJS - What is it & Why is it awesome ? (with demos)
Introduction to Angular 2
Angular2 with type script
AngularJS: Overview & Key Features
Angular 2 overview
Angularjs - lazy loading techniques
AngularJS: Service, factory & provider
Angularjs PPT
5 angularjs features
Ad

Similar to Moving from selenium to protractor for test automation (20)

PPTX
Protractor overview
PDF
Angular js
PPTX
Introduction to the Selenium_Session1.pptx
PDF
Angularjs 131211063348-phpapp01
PDF
AngularJs
PDF
AngularJS in practice
PDF
Effective testing of rich internet applications
PPTX
Intoduction to Angularjs
PPTX
Mastering Test Automation: How To Use Selenium Successfully
PPTX
Mean stack Magics
PPT
Automation with Selenium Presented by Quontra Solutions
PDF
AngularJS - A JavaScript Framework
PPTX
An overview of selenium webdriver
PDF
anoverviewofseleniumwebdriver-160407055026 (pdf.io).pdf
PPTX
Protractor framework architecture with example
PPTX
Training On Angular Js
PPTX
Angular 6 Training with project in hyderabad india
PDF
Case study: Open Source Automation Framework using Selenium WebDriver
PPT
Angular In Depth
PDF
An introduction to AngularJS
Protractor overview
Angular js
Introduction to the Selenium_Session1.pptx
Angularjs 131211063348-phpapp01
AngularJs
AngularJS in practice
Effective testing of rich internet applications
Intoduction to Angularjs
Mastering Test Automation: How To Use Selenium Successfully
Mean stack Magics
Automation with Selenium Presented by Quontra Solutions
AngularJS - A JavaScript Framework
An overview of selenium webdriver
anoverviewofseleniumwebdriver-160407055026 (pdf.io).pdf
Protractor framework architecture with example
Training On Angular Js
Angular 6 Training with project in hyderabad india
Case study: Open Source Automation Framework using Selenium WebDriver
Angular In Depth
An introduction to AngularJS
Ad

More from Zoe Gilbert (20)

PDF
SAP HANA Implementation A Complete Guide.pdf
PDF
HIPAA Compliance Testing In Software Applications.pdf
PDF
Checklist For Modernizing Your Legacy Application.pdf
PDF
Ad Hoc Testing: Everything You Need To Know
PDF
Eliminate OTT Platform Flaws with Quality Engineering.pdf
PDF
Best Tools for Website Accessibility Testing in 2022.pdf
PDF
What are the Advantages and Disadvantages of Microservices?
PDF
Embedded Testing Vs Software Testing – Key Difference.pdf
PDF
Why is Low Code Automation Testing Gaining Popular.pdf
PDF
Logistics Automation to Strengthen Process Efficiency.pdf
PDF
Accelerating Digital Transformation in the BFSI Sector.pdf
PDF
Hyperautomation.pdf
PDF
What is the Right Approach to QA Outsourcing.pdf
PDF
AI in Cloud Computing
PDF
Boast the Potential of DevOps with CI CD
PDF
What is Sanity Testing.pdf
PDF
Tackle Business Risks with Continuous Testing.pdf
PDF
Guide to Successful AI.pdf
PDF
Top Software Testing Models for Customer Satisfaction.pdf
PDF
Compliance testing or conformance testing
SAP HANA Implementation A Complete Guide.pdf
HIPAA Compliance Testing In Software Applications.pdf
Checklist For Modernizing Your Legacy Application.pdf
Ad Hoc Testing: Everything You Need To Know
Eliminate OTT Platform Flaws with Quality Engineering.pdf
Best Tools for Website Accessibility Testing in 2022.pdf
What are the Advantages and Disadvantages of Microservices?
Embedded Testing Vs Software Testing – Key Difference.pdf
Why is Low Code Automation Testing Gaining Popular.pdf
Logistics Automation to Strengthen Process Efficiency.pdf
Accelerating Digital Transformation in the BFSI Sector.pdf
Hyperautomation.pdf
What is the Right Approach to QA Outsourcing.pdf
AI in Cloud Computing
Boast the Potential of DevOps with CI CD
What is Sanity Testing.pdf
Tackle Business Risks with Continuous Testing.pdf
Guide to Successful AI.pdf
Top Software Testing Models for Customer Satisfaction.pdf
Compliance testing or conformance testing

Recently uploaded (20)

PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Encapsulation theory and applications.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
Big Data Technologies - Introduction.pptx
PDF
Modernizing your data center with Dell and AMD
PPTX
Cloud computing and distributed systems.
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Approach and Philosophy of On baking technology
PDF
KodekX | Application Modernization Development
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
A Presentation on Artificial Intelligence
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Unlocking AI with Model Context Protocol (MCP)
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
20250228 LYD VKU AI Blended-Learning.pptx
Encapsulation theory and applications.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Big Data Technologies - Introduction.pptx
Modernizing your data center with Dell and AMD
Cloud computing and distributed systems.
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Approach and Philosophy of On baking technology
KodekX | Application Modernization Development
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Understanding_Digital_Forensics_Presentation.pptx
Mobile App Security Testing_ A Comprehensive Guide.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Reach Out and Touch Someone: Haptics and Empathic Computing
A Presentation on Artificial Intelligence
The Rise and Fall of 3GPP – Time for a Sabbatical?
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx

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.