Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sharing the pain using Protractor

6,034 views

Published on

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

Published in: Software

Sharing the pain using Protractor

  1. 1. SHARING THE PAIN – PROTRACTOR & WEBDRIVER Nikitha Iyer Developer Anand Bagmar Software Quality Evangelist
  2. 2. @BagmarAnand about.me/anand.bagmar ABOUT US @NikithaIyer
  3. 3. Why are you here?
  4. 4. Case Study
  5. 5. DOMAIN
  6. 6. USER BASE
  7. 7. USAGE
  8. 8. SINGLE PAGE APPLICATION
  9. 9. Disclaimer
  10. 10. Why Protractor?
  11. 11. TEAM OWNS QUALITY Testing ≠ Testers Quality is a Team Responsibility
  12. 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. 13. TEAM COMPOSITION & SKILLS
  14. 14. OPTIONS LOOKED AT q Cucumber-JVM / Cucumber-Ruby q WebDriver-JS q Protractor
  15. 15. Challenges
  16. 16. CHALLENGES - JAVASCRIPT What is Test Automation? Synchronous, Step-by-Step execution ASynchronous Callbacks & Promises! Power of JavaScript?
  17. 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. 18. CHALLENGES – BUILD TOOL INTEGRATION Gulp-angular-protractor Gulp-protractor Protractor Selenium-WebDriver Gulp
  19. 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. 20. CHALLENGES - DEBUGGING Setting breakpoints while handling promises
  21. 21. CHALLENGES – MAPS
  22. 22. Overcoming the Challenges
  23. 23. SOLUTIONS – SIMPLIFY BUILD TOOL INTEGRATION Protractor Selenium-WebDriver Gulp
  24. 24. SOLUTIONS – DETERMINISTIC TEST DATA q Same Test Data in all environments / tenants q  Minimal Environment specific configuration q Intelligent ‘before’ & ‘after’ setups
  25. 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. 26. SOLUTIONS - LEARN •  JavaScript •  Angular •  Protractor
  27. 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. 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. 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. 30. @BagmarAnand about.me/anand.bagmar THANK YOU @NikithaIyer

×