The document discusses challenges and solutions encountered during the testing of a single page application using Protractor and Webdriver. It emphasizes the importance of quality as a team responsibility, the difficulties with JavaScript and browser support, and various strategies implemented to enhance test automation. Key takeaways include choosing an appropriate tech stack, managing automation risks, and continuously learning to improve testing practices.

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