Top Banner
SHARING THE PAIN – PROTRACTOR & WEBDRIVER Nikitha Iyer Developer Anand Bagmar Software Quality Evangelist
30

Sharing the pain using Protractor

Apr 16, 2017

Download

Software

Anand Bagmar
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Sharing the pain using Protractor

SHARING THE PAIN – PROTRACTOR & WEBDRIVER

Nikitha Iyer Developer

Anand Bagmar Software Quality Evangelist

Page 2: Sharing the pain using Protractor

@BagmarAnand about.me/anand.bagmar

ABOUT US

@NikithaIyer

Page 3: Sharing the pain using Protractor

Why are you here?

Page 4: Sharing the pain using Protractor

Case Study

Page 5: Sharing the pain using Protractor

DOMAIN

Page 6: Sharing the pain using Protractor

USER BASE

Page 7: Sharing the pain using Protractor

USAGE

Page 8: Sharing the pain using Protractor

SINGLE PAGE APPLICATION

Page 9: Sharing the pain using Protractor

Disclaimer

Page 10: Sharing the pain using Protractor

Why Protractor?

Page 11: Sharing the pain using Protractor

TEAM OWNS QUALITY

Testing ≠ Testers

Quality is a Team Responsibility

Page 12: Sharing the pain using Protractor

Unit (xUnit / JavaScript)

Component

Integration

View

Web Service

UI

Manual / Exploratory

Performance

Security

Accessibility

TEST PYRAMID

Page 13: Sharing the pain using Protractor

TEAM COMPOSITION & SKILLS

Page 14: Sharing the pain using Protractor

OPTIONS LOOKED AT

q Cucumber-JVM / Cucumber-Ruby

q WebDriver-JS

q Protractor

Page 15: Sharing the pain using Protractor

Challenges

Page 16: Sharing the pain using Protractor

CHALLENGES - JAVASCRIPT

What is Test Automation?

Synchronous, Step-by-Step execution

ASynchronous Callbacks & Promises!

Power of JavaScript?

Page 17: Sharing the pain using Protractor

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

CHALLENGES – BUILD TOOL INTEGRATION

Gulp-angular-protractor

Gulp-protractor

Protractor

Selenium-WebDriver

Gulp

Page 19: Sharing the pain using Protractor

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

CHALLENGES - DEBUGGING

Setting breakpoints while handling promises

Page 21: Sharing the pain using Protractor

CHALLENGES – MAPS

Page 22: Sharing the pain using Protractor

Overcoming the Challenges

Page 23: Sharing the pain using Protractor

SOLUTIONS – SIMPLIFY BUILD TOOL INTEGRATION

Protractor

Selenium-WebDriver

Gulp

Page 24: Sharing the pain using Protractor

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

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

SOLUTIONS - LEARN

•  JavaScript

•  Angular

•  Protractor

Page 27: Sharing the pain using 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!!!

Page 28: Sharing the pain using Protractor

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

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

@BagmarAnand about.me/anand.bagmar

THANK YOU

@NikithaIyer