Sharing the pain using Protractor
-
Upload
anand-bagmar -
Category
Software
-
view
3.804 -
download
0
Transcript of Sharing the pain using Protractor
![Page 1: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/1.jpg)
SHARING THE PAIN – PROTRACTOR & WEBDRIVER
Nikitha Iyer Developer
Anand Bagmar Software Quality Evangelist
![Page 2: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/2.jpg)
@BagmarAnand about.me/anand.bagmar
ABOUT US
@NikithaIyer
![Page 3: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/3.jpg)
Why are you here?
![Page 4: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/4.jpg)
Case Study
![Page 5: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/5.jpg)
DOMAIN
![Page 6: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/6.jpg)
USER BASE
![Page 7: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/7.jpg)
USAGE
![Page 8: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/8.jpg)
SINGLE PAGE APPLICATION
![Page 9: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/9.jpg)
Disclaimer
![Page 10: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/10.jpg)
Why Protractor?
![Page 11: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/11.jpg)
TEAM OWNS QUALITY
Testing ≠ Testers
Quality is a Team Responsibility
![Page 12: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/12.jpg)
Unit (xUnit / JavaScript)
Component
Integration
View
Web Service
UI
Manual / Exploratory
Performance
Security
Accessibility
TEST PYRAMID
![Page 13: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/13.jpg)
TEAM COMPOSITION & SKILLS
![Page 14: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/14.jpg)
OPTIONS LOOKED AT
q Cucumber-JVM / Cucumber-Ruby
q WebDriver-JS
q Protractor
![Page 15: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/15.jpg)
Challenges
![Page 16: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/16.jpg)
CHALLENGES - JAVASCRIPT
What is Test Automation?
Synchronous, Step-by-Step execution
ASynchronous Callbacks & Promises!
Power of JavaScript?
![Page 17: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/17.jpg)
CHALLENGES – BROWSER (& OS) SUPPORT
Browser / Driver Why? Challenges phantomJS Headless execution
- easier for developers - Seamless CI
integration
- Officially not recommended by Protractor
Chrome - End-user requirement
- Excellent for development & testing
- Certain elements “not visible” – though worked with Firefox
Firefox - End-user requirement
- Worked locally - Worked in CI – in
headless (xvfb), but NOT for maps
- Worked in headless mode (xvfb) in vagrant
![Page 18: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/18.jpg)
CHALLENGES – BUILD TOOL INTEGRATION
Gulp-angular-protractor
Gulp-protractor
Protractor
Selenium-WebDriver
Gulp
![Page 19: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/19.jpg)
CHALLENGES - ANGULAR
Type Example Angular Directives Ex: ng-repeat, ng-model Custom Directives Ex: third party libraries providing
multi-column select, Sliders for range, Charts
Working with non-Angular Ex: Login, Admin
![Page 20: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/20.jpg)
CHALLENGES - DEBUGGING
Setting breakpoints while handling promises
![Page 21: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/21.jpg)
CHALLENGES – MAPS
![Page 22: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/22.jpg)
Overcoming the Challenges
![Page 23: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/23.jpg)
SOLUTIONS – SIMPLIFY BUILD TOOL INTEGRATION
Protractor
Selenium-WebDriver
Gulp
![Page 24: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/24.jpg)
SOLUTIONS – DETERMINISTIC TEST DATA
q Same Test Data in all environments / tenants
q Minimal Environment specific configuration
q Intelligent ‘before’ & ‘after’ setups
![Page 25: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/25.jpg)
SOLUTIONS – UTILITIES
Page functions - Common behavior
- Non-angular
Screenshots with counters
Unique output directory names
JS Console warnings & errors
Chart functions
CSV loader
Modals & Alerts
File Upload
File Download
Custom Locators
Configurations
![Page 26: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/26.jpg)
SOLUTIONS - LEARN
• JavaScript
• Angular
• Protractor
![Page 27: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/27.jpg)
DID WE SOLVE ALL THE PROBLEMS?
JUST KIDDING!!!
Of course, NO!!
- Maps
- Reports
- How many and where to put “assertions”?
- Use Soft-asserts
YES!!!
![Page 28: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/28.jpg)
OUR TAKEAWAYS FROM THIS PAIN & GAIN!
q Choose tech-stack based on context
q Experiment & Fail-Fast!
q Proper Cost-Value evaluation
q Manage Risk (what to automate – now / later, and what NOT to automate)
q Keep learning & sharing – new and better solutions
28
![Page 29: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/29.jpg)
REFERENCES
Page Objects – Google - https://code.google.com/p/selenium/wiki/PageObjects
Page Objects – Martin Fowler - http://martinfowler.com/bliki/PageObject.html
Perils of Page-Object Pattern – Anand Bagmar - http://essenceoftesting.blogspot.in/2014/09/perils-of-page-object-pattern.html
Protractor – https://docs.angularjs.org/guide/e2e-testing, http://www.protractortest.org/#/
Learn Protractor for Angular – https://docs.angularjs.org/tutorial
Sample project – https://github.com/NikithaIyer/angular-phonecat-e2e
![Page 30: Sharing the pain using Protractor](https://reader033.fdocuments.in/reader033/viewer/2022051301/58705d551a28aba2118b6eb1/html5/thumbnails/30.jpg)
@BagmarAnand about.me/anand.bagmar
THANK YOU
@NikithaIyer