SHARING THE PAIN – PROTRACTOR & WEBDRIVER

Nikitha Iyer Developer

Anand Bagmar Software Quality Evangelist

@BagmarAnand about.me/anand.bagmar

ABOUT US

@NikithaIyer

Why are you here?

Case Study

DOMAIN

USER BASE

USAGE

SINGLE PAGE APPLICATION

Disclaimer

Why Protractor?

TEAM OWNS QUALITY

Testing ≠ Testers

Quality is a Team Responsibility

Unit (xUnit / JavaScript)

Component

Integration

View

Web Service

UI

Manual / Exploratory

Performance

Security

Accessibility

TEST PYRAMID

TEAM COMPOSITION & SKILLS

OPTIONS LOOKED AT

q Cucumber-JVM / Cucumber-Ruby

q WebDriver-JS

q Protractor

Challenges

CHALLENGES - JAVASCRIPT

What is Test Automation?

Synchronous, Step-by-Step execution

ASynchronous Callbacks & Promises!

Power of JavaScript?

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

CHALLENGES – BUILD TOOL INTEGRATION

Gulp-angular-protractor

Gulp-protractor

Protractor

Selenium-WebDriver

Gulp

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

CHALLENGES - DEBUGGING

Setting breakpoints while handling promises

CHALLENGES – MAPS

Overcoming the Challenges

SOLUTIONS – SIMPLIFY BUILD TOOL INTEGRATION

Protractor

Selenium-WebDriver

Gulp

SOLUTIONS – DETERMINISTIC TEST DATA

q Same Test Data in all environments / tenants

q  Minimal Environment specific configuration

q  Intelligent ‘before’ & ‘after’ setups

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

SOLUTIONS - LEARN

•  JavaScript

•  Angular

•  Protractor

DID WE SOLVE ALL THE PROBLEMS?

JUST KIDDING!!!

Of course, NO!!

-  Maps

-  Reports

-  How many and where to put “assertions”?

-  Use Soft-asserts

YES!!!

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

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

@BagmarAnand about.me/anand.bagmar

THANK YOU

@NikithaIyer