introduction to protractor - habilelabs
TRANSCRIPT
![Page 1: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/1.jpg)
HABILELABS PVT. LTD.YOUR INTEREST OUR INTELLIGENCE
VIKASH GUPTADeveloper
![Page 2: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/2.jpg)
ProtractorAn end-to-end test framework
Let`s start!
![Page 3: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/3.jpg)
ET
P
1
2
3
4
What is Testing?Basics of Testing with some example.
What is End-to-End Testing?
About ProtractorQuick story behind development of Protractor
How Protractor works?Behind the scenes..
![Page 4: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/4.jpg)
5
6
7
Installation and Configuration How to get up and running with Protractor
Live Demo on Protractor TestingA Quick Demo
Why Protractor?This will make you feel better
End of presentation with a Question?Thank you for your attention
![Page 5: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/5.jpg)
TestingWhat is Testing ?
![Page 6: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/6.jpg)
What is TestingLet’s clear some basics about testing.
1. Unit Testing
“Verification of Product before take on to online network..”
“Validate the separate units of source code remains working or not
“Integrate/combine the unit tested module one by one and test behavior”
2. Integration Testing
![Page 7: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/7.jpg)
End-to-End TestingWhat is e2e Testing ?
![Page 8: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/8.jpg)
What is End-to-End TestingLet’s talk about End-to-End..
• The purpose of carrying out end-to-end tests is to identifysystem dependencies and to ensure that the right informationis passed between various system components and systems.
“test whether the flow of an application is performing as designed from start to finish. ..”
![Page 9: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/9.jpg)
Step 3 Expect some Output For Success
Check for some element, presence of those elementmeans your test got succeed or failed.
Step 2Provide Input to the page
It includes the operations like provide input for TextBox, clicking on buttons or checkboxes etc.
Expect some page for Input
How End-to-End Test WorksWork Flow of End-to-End Tests.
IDEA
Step 1
![Page 10: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/10.jpg)
About ProtractorA end-2-end testing tool
![Page 11: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/11.jpg)
What is ProtractorLet’s talk about Protractor..
• Protractor is an end-to-end test frameworkfor AngularJS applications.
• It use Jasmine framework for it’s syntax.
• Developed by Julie Ralph in 2013, (same team as Angular) atGoogle.
• Protractor is built on top of WebDriverJS.
• WebDriverJS provide the browser-specific nativeevent libraries.
• In process, Selenium server work as Interpreter.
![Page 12: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/12.jpg)
SSynchronization issue.
As you know, Almost web application uses javascript as its primary component and Javascript is asynchronus in nature.
In Complex UI applications, It become hard to find element by css and id. So at the end, use xpath
ElementFinder issues
How Protractor came into Picture
IDEA
So Protractor uses angular models, binding, expressions as element finder, that makes End-to-End testing more promising.
Angular have got power of directives
S
Protractor use promises to maintain control flow
For Angular apps, Protractor will wait until the Angular Zone stabilizes. This means Protractor waits until there are no pending asynchronous tasks in your Angular application. This means that all timeouts and http requests are finished.
![Page 13: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/13.jpg)
InstallationLet’s install Protractor
![Page 14: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/14.jpg)
N J P W
1. Node jsInstall windows executable file
2. JDKFrom Java Website
3. Protractornpm install –g protractor
4. WebDriver ManagerWebdriver-manager update
Protractor InstallationLet’s install protractor
• Protractor is a Node.js program. To run, you will need to haveNode.js installed.
• Protractor use Selenium to control browser automatically, thisneeds Java.
![Page 15: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/15.jpg)
Live DemoLet’s see It live
![Page 16: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/16.jpg)
Live Demo on ProtractorLet’s play around Protractor..
• For Demo purpose of Testing, clone the angular project
https://github.com/juliemr/protractor-demo.
![Page 17: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/17.jpg)
Why ProtractorLet’s know Reasons
![Page 18: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/18.jpg)
For Angular AppsProtractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part.
Automatic WaitingYou no longer need to add waits and sleeps to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes pending tasks
Page ObjectEasy to set up page objects. Protractor does not perform WebDriver commands till an action is needed
Support for Selenium ServerProtractor provide support for chrome and firefoxbrowser with webdriver-manager. That makes test fast.
Concept of Custom locator.You can make element-locator specific to your language.
Why ProtractorReasons to use protractor
IDEA
![Page 19: Introduction to Protractor - Habilelabs](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5a6779db7f8b9a656a8b55e5/html5/thumbnails/19.jpg)
Contact Us
Address: 4th Floor, IGM School Campus, Jaipur
Website: www.habilelabs.io
Contact no: +91-9828247415
mail id: [email protected]