Slides from my talk in Selenium Conference 2016 about "Sharing the pain with Protractor & Selenium WebDriver" See blog for more information - http://essenceoftesting.blogspot.com/2016/06/sharing-pain-using-protractor.html My blog: http://essenceoftesting.blogspot.com

1. SHARING THE PAIN –
PROTRACTOR &
WEBDRIVER
Nikitha Iyer
Developer
Anand Bagmar
Software Quality Evangelist

2. @BagmarAnand
about.me/anand.bagmar
ABOUT US
@NikithaIyer

3. Why are you here?

4. Case Study

5. DOMAIN

6. USER BASE

7. USAGE

8. SINGLE PAGE APPLICATION

9. Disclaimer

10. Why Protractor?

11. TEAM OWNS QUALITY
Testing ≠ Testers
Quality is a Team Responsibility

12. Unit (xUnit / JavaScript)
Component
Integration
View
Web Service
UI
Manual / Exploratory
P
e
r
f
o
r
m
a
n
c
e
S
e
c
u
r
i
t
y
Accessibility
TEST PYRAMID

13. TEAM COMPOSITION & SKILLS

14. OPTIONS LOOKED AT
q Cucumber-JVM / Cucumber-Ruby
q WebDriver-JS
q Protractor

15. Challenges

16. CHALLENGES - JAVASCRIPT
What is Test Automation?
Synchronous,
Step-by-Step execution
ASynchronous
Callbacks & Promises!
Power of JavaScript?

17. 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

18. CHALLENGES – BUILD TOOL INTEGRATION
Gulp-angular-protractor
Gulp-protractor
Protractor
Selenium-WebDriver
Gulp

19. 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

20. CHALLENGES - DEBUGGING
Setting breakpoints while handling promises

21. CHALLENGES – MAPS

22. Overcoming the
Challenges

23. SOLUTIONS – SIMPLIFY BUILD TOOL INTEGRATION
Protractor
Selenium-WebDriver
Gulp

24. SOLUTIONS – DETERMINISTIC TEST DATA
q Same Test Data in all environments / tenants
q Minimal Environment specific configuration
q Intelligent ‘before’ & ‘after’ setups

25. 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

26. SOLUTIONS - LEARN
• JavaScript
• Angular
• Protractor

27. DID WE SOLVE ALL THE PROBLEMS?
JUST KIDDING!!!
Of course, NO!!
- Maps
- Reports
- How many and where to put “assertions”?
- Use Soft-asserts
YES!!!

28. 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

29. 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

30. @BagmarAnand
about.me/anand.bagmar
THANK YOU
@NikithaIyer