SlideShare a Scribd company logo
1 of 20
Get a start with
for AngularJS Web Automation
TPC November 2016 Meetup
By Abhishek Yadav (@abhishekkyd)
Agenda
 Overview of Web Automation
 About Protractor
 About AngularJS
 Difference about Protractor over Selenium WebDriver
 Protractor Installation
 Scripting using Protractor for AngularJS Web Automation
 Working with Jasmine and Protractor
 Framework Development using Protractor
Overview of Web Automation
Now a days every organization prefers automated testing once a product reaches to
the stable phase to reduce the testing effort. Since testing cost is an important factor
for any project, organizations have started preferring open source test automation
tools (which have reached a stage where they now rival the commercial ones) instead
of investing in costly commercial testing tools.
A variety of open source automation testing tools is available for almost all types of
testing such as functional, Web, UAT, regression, performance etc. Some open source
tools are Selenium, Cucumber, FitNesse, Sahi, Watir etc).
“Testing is about gaining confidence that your code does what
you think it should do”
About Protractor
 Protractor is an end-to-end test framework for AngularJS applications. Protractor
runs tests against your application running in a real browser, interacting with it as a
user would.
 Protractor is built on top of WebDriverJS, which uses native events and browser-
specific drivers to interact with your application as a user would.
 It also supports non-angular APP.
 With protractor, you can write e2e tests with JavaScript, the language you write
with Angular app.
About Protractor
 Protractor works in conjunction with Selenium to provide an automated test
infrastructure that can simulate a user’s interaction with an Angular application
running in a browser or mobile device.
 it has Angular-specific features
 It's element finders wait for Angular's $digest loop and $http to finish. So you'll
have less chance to struggle with sleep and timing issues.
About AngularJS
AngularJS is what HTML would have been, had it been designed for building web-
apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency
injection and great testability story all implemented with pure client-side JavaScript!
Difference about Protractor over Selenium
WebDriver
http://www.protractortest.org/#/api?view=ProtractorBy
Protractor Installation
 Download Node.JS http://nodejs.org/download/
node --version
npm install protractor -g
webdriver-manager update
webdriver-manager update –ie
webdriver-manager start
 Configuration, copy following into “conf.js”:
 Test, copy following into “protrator-test.js”:
Scripting using Protractor for AngularJS
Web Automation
describe('angularjs homepage', function() {
it('should greet the named user', function() {
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(greeting.getText()).toEqual('Hello Julie!');
});
});
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['protrator-test.js']
};
 Capabilities
 Multicapabilities
Scripting using Protractor for AngularJS
Web Automation
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['protrator-test.js']
capabilities: {
'browserName': 'chrome'
},
jasmineNodeOpts: {
showColors: true
}
};
https://github.com/angular/protractor/blob/master/lib/config.ts
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['protrator-test.js']
multiCapabilities:
{
'browserName': ‘firefox'
},
{
'browserName': 'chrome'
},
jasmineNodeOpts: {
showColors: true
}
};
Framework Development using Protractor
 Page Objects - These are the js files where you map the elements and write the
functions to perform actions;
 Exports and Require - This is how you connect your Page Objects to your Test
Specs;
 Test specs - These are the js files where you write your tests using jasmine syntax.
Page Objects
var AngularHomepage = function() {
this.nameInput = element(by.model('yourName')); this.greeting =
element(by.binding('yourName'));
this.get = function() { browser.get('http://www.angularjs.org');
};
this.setName = function(name) {
this.nameInput.sendKeys(name);
};
};
var AngularHomepage = require('homepage.js');
describe('HomePage Tests', function() {
var angularHomepage = new AngularHomepage();
angularHomepage.get();
angularHomepage.nameInput.sendKeys('Rafael');
});
Separate your tests in various test suites
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: {
'browserName': 'chrome‘
},
suites: {
homepage: ‘homepage/*',
search: [‘SearchSpec.js']
},
jasmineNodeOpts: {
showColors: true
}
};
protractor protractor.conf.js --suite homepage
Using OnPrepare
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome‘
},
onPrepare: function() {
browser.driver.manage().window().maximize();
},
jasmineNodeOpts: {
showColors: true
}
};
Using OnPrepare
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome‘
},
onPrepare: function() {
global.mydriver = browser.driver;
mydriver.manage().window().maximize();
},
jasmineNodeOpts: {
showColors: true
}
};
Using params
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome‘
},
// This can be changed via the command line as:
// --params.login.user 'ngrocks'
params: {
login: {
user: 'protractor-br',
password: '#ng123#'
}
},
jasmineNodeOpts: {
showColors: true
}
};
Using params
describe('login page', function() {
var params = browser.params;
it('should login successfully', function() {
element( by.model('username') ).sendKeys( params.login.user );
element( by.model('password') ).sendKeys( params.login.password );
element( by.css('[ng-click="login()"]') ).click();
expect( element(by.binding('username') ).getText() ).toEqual(
params.login.user );
});
});
References
 http://www.protractortest.org/#/
 http://www.protractortest.org/#/api
 https://github.com/angular/protractor
 https://angularjs.org/
 https://jasmine.github.io/2.0/introduction.html
 https://github.com/angular/protractor/blob/master/docs/toc.md
 http://www.ng-newsletter.com/posts/practical-protractor.html
 https://www.youtube.com/watch?v=idb6hOxlyb8
Protractor overview
Protractor overview

More Related Content

What's hot

Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With CypressKnoldus Inc.
 
Automation Testing using Selenium Webdriver
Automation Testing using Selenium WebdriverAutomation Testing using Selenium Webdriver
Automation Testing using Selenium WebdriverPankaj Biswas
 
BDD with CucumberJS and WebdriverIO
BDD with CucumberJS and WebdriverIOBDD with CucumberJS and WebdriverIO
BDD with CucumberJS and WebdriverIOM Rizwanur Rashid
 
Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of SignalsCoding Academy
 
Why Should we use Microsoft's Playwright
Why Should we use Microsoft's PlaywrightWhy Should we use Microsoft's Playwright
Why Should we use Microsoft's PlaywrightKnoldus Inc.
 
Web application testing with Selenium
Web application testing with SeleniumWeb application testing with Selenium
Web application testing with SeleniumKerry Buckley
 
Functional Tests Automation with Robot Framework
Functional Tests Automation with Robot FrameworkFunctional Tests Automation with Robot Framework
Functional Tests Automation with Robot Frameworklaurent bristiel
 
WebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testingWebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testingDaniel Chivescu
 
Test Automation and Selenium
Test Automation and SeleniumTest Automation and Selenium
Test Automation and SeleniumKarapet Sarkisyan
 
An overview of selenium webdriver
An overview of selenium webdriverAn overview of selenium webdriver
An overview of selenium webdriverAnuraj S.L
 
QA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. SeleniumQA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. SeleniumLyudmil Latinov
 
Introduction cypress
Introduction cypressIntroduction cypress
Introduction cypressOim Trust
 
Automated testing with Cypress
Automated testing with CypressAutomated testing with Cypress
Automated testing with CypressYong Shean Chong
 
Webdriver io presentation
Webdriver io presentationWebdriver io presentation
Webdriver io presentationJoão Nabais
 
Selenium test automation
Selenium test automationSelenium test automation
Selenium test automationSrikanth Vuriti
 
Introducing Swagger
Introducing SwaggerIntroducing Swagger
Introducing SwaggerTony Tam
 

What's hot (20)

Getting Started With Cypress
Getting Started With CypressGetting Started With Cypress
Getting Started With Cypress
 
Automation Testing using Selenium Webdriver
Automation Testing using Selenium WebdriverAutomation Testing using Selenium Webdriver
Automation Testing using Selenium Webdriver
 
BDD with CucumberJS and WebdriverIO
BDD with CucumberJS and WebdriverIOBDD with CucumberJS and WebdriverIO
BDD with CucumberJS and WebdriverIO
 
Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
 
Cypress Automation
Cypress  AutomationCypress  Automation
Cypress Automation
 
Why Should we use Microsoft's Playwright
Why Should we use Microsoft's PlaywrightWhy Should we use Microsoft's Playwright
Why Should we use Microsoft's Playwright
 
Angular Lifecycle Hooks
Angular Lifecycle HooksAngular Lifecycle Hooks
Angular Lifecycle Hooks
 
Web application testing with Selenium
Web application testing with SeleniumWeb application testing with Selenium
Web application testing with Selenium
 
Functional Tests Automation with Robot Framework
Functional Tests Automation with Robot FrameworkFunctional Tests Automation with Robot Framework
Functional Tests Automation with Robot Framework
 
WebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testingWebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testing
 
Test Automation and Selenium
Test Automation and SeleniumTest Automation and Selenium
Test Automation and Selenium
 
An overview of selenium webdriver
An overview of selenium webdriverAn overview of selenium webdriver
An overview of selenium webdriver
 
TestNG Framework
TestNG Framework TestNG Framework
TestNG Framework
 
QA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. SeleniumQA Challenge Accepted 4.0 - Cypress vs. Selenium
QA Challenge Accepted 4.0 - Cypress vs. Selenium
 
Introduction cypress
Introduction cypressIntroduction cypress
Introduction cypress
 
Automated testing with Cypress
Automated testing with CypressAutomated testing with Cypress
Automated testing with Cypress
 
Webdriver io presentation
Webdriver io presentationWebdriver io presentation
Webdriver io presentation
 
Selenium test automation
Selenium test automationSelenium test automation
Selenium test automation
 
SonarQube Overview
SonarQube OverviewSonarQube Overview
SonarQube Overview
 
Introducing Swagger
Introducing SwaggerIntroducing Swagger
Introducing Swagger
 

Viewers also liked

Protractor for angularJS
Protractor for angularJSProtractor for angularJS
Protractor for angularJSKrishna Kumar
 
интернет в социологии важнейшие информационные сайты дадададад)))
интернет в социологии   важнейшие информационные сайты дадададад)))интернет в социологии   важнейшие информационные сайты дадададад)))
интернет в социологии важнейшие информационные сайты дадададад)))faqMEN
 
20150128 angular js_headless_testing
20150128 angular js_headless_testing20150128 angular js_headless_testing
20150128 angular js_headless_testingBenjamin Neu
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular jscodeandyou forums
 
Advanced Jasmine
Advanced JasmineAdvanced Jasmine
Advanced Jasminejbellsey
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016Matt Raible
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with JasmineLeon van der Grient
 
The sweet smell of jasmine for testing JavaScript
The sweet smell of jasmine for testing JavaScriptThe sweet smell of jasmine for testing JavaScript
The sweet smell of jasmine for testing JavaScriptEmma Armstrong
 
Automated Acceptance Testing Example
Automated Acceptance Testing ExampleAutomated Acceptance Testing Example
Automated Acceptance Testing ExampleHani Massoud
 
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015Codemotion
 
Better End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorBetter End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorKasun Kodagoda
 
Selenium Camp 2016
Selenium Camp 2016Selenium Camp 2016
Selenium Camp 2016Dan Cuellar
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingLars Thorup
 

Viewers also liked (20)

Protractor: Tips & Tricks
Protractor: Tips & TricksProtractor: Tips & Tricks
Protractor: Tips & Tricks
 
Protractor training
Protractor trainingProtractor training
Protractor training
 
Protractor for angularJS
Protractor for angularJSProtractor for angularJS
Protractor for angularJS
 
интернет в социологии важнейшие информационные сайты дадададад)))
интернет в социологии   важнейшие информационные сайты дадададад)))интернет в социологии   важнейшие информационные сайты дадададад)))
интернет в социологии важнейшие информационные сайты дадададад)))
 
20150128 angular js_headless_testing
20150128 angular js_headless_testing20150128 angular js_headless_testing
20150128 angular js_headless_testing
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
 
Advanced Jasmine
Advanced JasmineAdvanced Jasmine
Advanced Jasmine
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
 
Testing Backbone applications with Jasmine
Testing Backbone applications with JasmineTesting Backbone applications with Jasmine
Testing Backbone applications with Jasmine
 
The sweet smell of jasmine for testing JavaScript
The sweet smell of jasmine for testing JavaScriptThe sweet smell of jasmine for testing JavaScript
The sweet smell of jasmine for testing JavaScript
 
Jasmine framework
Jasmine frameworkJasmine framework
Jasmine framework
 
Automated Acceptance Testing Example
Automated Acceptance Testing ExampleAutomated Acceptance Testing Example
Automated Acceptance Testing Example
 
Thinking outside the box (SOX)
Thinking outside the box (SOX)Thinking outside the box (SOX)
Thinking outside the box (SOX)
 
Angular Testing
Angular TestingAngular Testing
Angular Testing
 
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
 
Better End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorBetter End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using Protractor
 
Selenium Camp 2016
Selenium Camp 2016Selenium Camp 2016
Selenium Camp 2016
 
Selenium
SeleniumSelenium
Selenium
 
Advanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit TestingAdvanced Jasmine - Front-End JavaScript Unit Testing
Advanced Jasmine - Front-End JavaScript Unit Testing
 
Software Testing
Software TestingSoftware Testing
Software Testing
 

Similar to Protractor overview

Moving from selenium to protractor for test automation
Moving from selenium to protractor for test automationMoving from selenium to protractor for test automation
Moving from selenium to protractor for test automationZoe Gilbert
 
Effective testing of rich internet applications
Effective testing of rich internet applicationsEffective testing of rich internet applications
Effective testing of rich internet applicationsRashwin
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdfBig Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdfsarah david
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxsarah david
 
Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideMek Srunyu Stittri
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfquantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfsarah david
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.jsMek Srunyu Stittri
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptxquantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptxsarah david
 
Top 5 AngularJS Tool for Application Development
Top 5 AngularJS Tool for Application DevelopmentTop 5 AngularJS Tool for Application Development
Top 5 AngularJS Tool for Application DevelopmentPaul Cook
 
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...Understanding Selenium/RC, Webdriver Architecture and developing the page obj...
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...Atirek Gupta
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaAgile Testing Alliance
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullySpringPeople
 
An Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorAn Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorCubet Techno Labs
 
Javascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsJavascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsSalesforce Developers
 
Top 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersTop 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersAlbiorix Technology
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with exampleshadabgilani
 
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptx
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptxA Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptx
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptxMatthew Allen
 
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...Dakiry
 

Similar to Protractor overview (20)

Moving from selenium to protractor for test automation
Moving from selenium to protractor for test automationMoving from selenium to protractor for test automation
Moving from selenium to protractor for test automation
 
Effective testing of rich internet applications
Effective testing of rich internet applicationsEffective testing of rich internet applications
Effective testing of rich internet applications
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdfBig Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
 
Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfquantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptxquantum_leap_angularjs_tools_redefining_development_in_2023.pptx
quantum_leap_angularjs_tools_redefining_development_in_2023.pptx
 
Top 5 AngularJS Tool for Application Development
Top 5 AngularJS Tool for Application DevelopmentTop 5 AngularJS Tool for Application Development
Top 5 AngularJS Tool for Application Development
 
SatishKumar_Prolifics
SatishKumar_ProlificsSatishKumar_Prolifics
SatishKumar_Prolifics
 
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...Understanding Selenium/RC, Webdriver Architecture and developing the page obj...
Understanding Selenium/RC, Webdriver Architecture and developing the page obj...
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
 
Mastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium SuccessfullyMastering Test Automation: How To Use Selenium Successfully
Mastering Test Automation: How To Use Selenium Successfully
 
AngularJS - A JavaScript Framework
AngularJS - A JavaScript FrameworkAngularJS - A JavaScript Framework
AngularJS - A JavaScript Framework
 
An Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorAn Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using Protractor
 
Javascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsJavascript-heavy Salesforce Applications
Javascript-heavy Salesforce Applications
 
Top 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersTop 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For Developers
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with example
 
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptx
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptxA Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptx
A Definitive Guide to Mastering Selenium WebDriver Automation Effectively.pptx
 
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для...
 

Recently uploaded

Intro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdfIntro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdfrs7054576148
 
Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01KreezheaRecto
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698
 
KubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghlyKubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghlysanyuktamishra911
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapRishantSharmaFr
 
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete RecordCCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete RecordAsst.prof M.Gokilavani
 
Online banking management system project.pdf
Online banking management system project.pdfOnline banking management system project.pdf
Online banking management system project.pdfKamal Acharya
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxJuliansyahHarahap1
 
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...tanu pandey
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Arindam Chakraborty, Ph.D., P.E. (CA, TX)
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXssuser89054b
 
Unit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdfUnit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdfRagavanV2
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptMsecMca
 

Recently uploaded (20)

Intro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdfIntro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdf
 
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
 
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
 
Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01
 
NFPA 5000 2024 standard .
NFPA 5000 2024 standard                                  .NFPA 5000 2024 standard                                  .
NFPA 5000 2024 standard .
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
 
KubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghlyKubeKraft presentation @CloudNativeHooghly
KubeKraft presentation @CloudNativeHooghly
 
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
 
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete RecordCCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
 
Online banking management system project.pdf
Online banking management system project.pdfOnline banking management system project.pdf
Online banking management system project.pdf
 
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptx
 
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 
Unit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdfUnit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdf
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
 
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
 

Protractor overview

  • 1. Get a start with for AngularJS Web Automation TPC November 2016 Meetup By Abhishek Yadav (@abhishekkyd)
  • 2. Agenda  Overview of Web Automation  About Protractor  About AngularJS  Difference about Protractor over Selenium WebDriver  Protractor Installation  Scripting using Protractor for AngularJS Web Automation  Working with Jasmine and Protractor  Framework Development using Protractor
  • 3. Overview of Web Automation Now a days every organization prefers automated testing once a product reaches to the stable phase to reduce the testing effort. Since testing cost is an important factor for any project, organizations have started preferring open source test automation tools (which have reached a stage where they now rival the commercial ones) instead of investing in costly commercial testing tools. A variety of open source automation testing tools is available for almost all types of testing such as functional, Web, UAT, regression, performance etc. Some open source tools are Selenium, Cucumber, FitNesse, Sahi, Watir etc). “Testing is about gaining confidence that your code does what you think it should do”
  • 4. About Protractor  Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.  Protractor is built on top of WebDriverJS, which uses native events and browser- specific drivers to interact with your application as a user would.  It also supports non-angular APP.  With protractor, you can write e2e tests with JavaScript, the language you write with Angular app.
  • 5. About Protractor  Protractor works in conjunction with Selenium to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device.  it has Angular-specific features  It's element finders wait for Angular's $digest loop and $http to finish. So you'll have less chance to struggle with sleep and timing issues.
  • 6. About AngularJS AngularJS is what HTML would have been, had it been designed for building web- apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!
  • 7. Difference about Protractor over Selenium WebDriver http://www.protractortest.org/#/api?view=ProtractorBy
  • 8. Protractor Installation  Download Node.JS http://nodejs.org/download/ node --version npm install protractor -g webdriver-manager update webdriver-manager update –ie webdriver-manager start
  • 9.  Configuration, copy following into “conf.js”:  Test, copy following into “protrator-test.js”: Scripting using Protractor for AngularJS Web Automation describe('angularjs homepage', function() { it('should greet the named user', function() { browser.get('http://www.angularjs.org'); element(by.model('yourName')).sendKeys('Julie'); var greeting = element(by.binding('yourName')); expect(greeting.getText()).toEqual('Hello Julie!'); }); }); exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['protrator-test.js'] };
  • 10.  Capabilities  Multicapabilities Scripting using Protractor for AngularJS Web Automation exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['protrator-test.js'] capabilities: { 'browserName': 'chrome' }, jasmineNodeOpts: { showColors: true } }; https://github.com/angular/protractor/blob/master/lib/config.ts exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['protrator-test.js'] multiCapabilities: { 'browserName': ‘firefox' }, { 'browserName': 'chrome' }, jasmineNodeOpts: { showColors: true } };
  • 11. Framework Development using Protractor  Page Objects - These are the js files where you map the elements and write the functions to perform actions;  Exports and Require - This is how you connect your Page Objects to your Test Specs;  Test specs - These are the js files where you write your tests using jasmine syntax.
  • 12. Page Objects var AngularHomepage = function() { this.nameInput = element(by.model('yourName')); this.greeting = element(by.binding('yourName')); this.get = function() { browser.get('http://www.angularjs.org'); }; this.setName = function(name) { this.nameInput.sendKeys(name); }; }; var AngularHomepage = require('homepage.js'); describe('HomePage Tests', function() { var angularHomepage = new AngularHomepage(); angularHomepage.get(); angularHomepage.nameInput.sendKeys('Rafael'); });
  • 13. Separate your tests in various test suites exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome‘ }, suites: { homepage: ‘homepage/*', search: [‘SearchSpec.js'] }, jasmineNodeOpts: { showColors: true } }; protractor protractor.conf.js --suite homepage
  • 14. Using OnPrepare exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome‘ }, onPrepare: function() { browser.driver.manage().window().maximize(); }, jasmineNodeOpts: { showColors: true } };
  • 15. Using OnPrepare exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome‘ }, onPrepare: function() { global.mydriver = browser.driver; mydriver.manage().window().maximize(); }, jasmineNodeOpts: { showColors: true } };
  • 16. Using params exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome‘ }, // This can be changed via the command line as: // --params.login.user 'ngrocks' params: { login: { user: 'protractor-br', password: '#ng123#' } }, jasmineNodeOpts: { showColors: true } };
  • 17. Using params describe('login page', function() { var params = browser.params; it('should login successfully', function() { element( by.model('username') ).sendKeys( params.login.user ); element( by.model('password') ).sendKeys( params.login.password ); element( by.css('[ng-click="login()"]') ).click(); expect( element(by.binding('username') ).getText() ).toEqual( params.login.user ); }); });
  • 18. References  http://www.protractortest.org/#/  http://www.protractortest.org/#/api  https://github.com/angular/protractor  https://angularjs.org/  https://jasmine.github.io/2.0/introduction.html  https://github.com/angular/protractor/blob/master/docs/toc.md  http://www.ng-newsletter.com/posts/practical-protractor.html  https://www.youtube.com/watch?v=idb6hOxlyb8