Browser Automation Testing With JavaScript

SAWebDev Meetup - August 16, 2016
San Antonio, Texas

Transcript

1. BROWSER AUTOMATION TESTING WITH JAVASCRIPT AN INTRODUCTION TO
2. ABOUT ME ERIC CARRAWAY ▸ UI Engineer at Rackspace working primarily in JavaScript ▸ Coding Bootcamp Graduate ▸ Former High School Band Director ▸ Musician / Teacher Contact: eric@ericcarraway.com
3. 5WH QUESTIONS…
4. 4 UNIT TESTS FUNCTIONAL TESTS ▸ test individual components ▸ controllers ▸ directives ▸ services ▸ filters ▸ etc. ▸ test the application ▸ interact like a user ▸ runs in a browser
5. WHY? REASONS FOR AUTOMATED TESTING ▸ confidence ▸ ability to work quickly ▸ ability to refactor with courage ▸ avoid regressions ▸ CI-CD (Jenkins / PR-builder / etc) ▸ manual testing is expensive
6. 24 ADDITIONAL POINTS ▸ Environments ▸ Dev / Mock / Integration / E2E / Prod ▸ Mock Data Setup (Why?) ▸ How to turn a story requirements into tests ▸ AAA ▸ Page Objects ▸ Folder Structure
7. THE PROCESS OF TESTING CHANGES TO THE PROGRAM TO MAKE SURE THAT THE OLDER PROGRAMMING STILL WORKS WITH THE NEW CHANGES What is Regression Testing? WHAT IS A REGRESSION?
8. AN EXAMPLE https://youtu.be/2oxkduJ0Pc0
9. ANY APPLICATION THAT CAN BE WRITTEN IN JAVASCRIPT, WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT. Atwood's Law Jeff Atwood (2007) WHY BROWSER AUTOMATION TESTING IN JAVASCRIPT?
10. PROFICIENCY WITH TESTING IS REQUIRED UI ENGINEERS / FRONT-END DEVS CURRENT JOB POSTINGS:
11. 11 TOOLS ▸ Selenium WebDriver ▸ the de facto standard ▸ written in Java ▸ synchronous-style ▸ webdriver.io ▸ http://webdriver.io/ ▸ Selenium 2.0 bindings for NodeJS
13. 13 TOOLS (CONTINUED) ▸ Protractor ▸ an end-to-end test framework ▸ specifically for AngularJS applications ▸ tests run in a real browser ▸ interact with the application as a user would ▸ http://www.protractortest.org/
15. FRAMEWORK ASSERTIONS
16. THAT SEEMS LIKE A LOT OF STUFF TO WIRE UP… WEBDRIVER.IO + MOCHA + CHAI
17. Enter Chimp… Opinionated Choices = Easy Setup
18. 18 HURDLES WITH JAVASCRIPT ▸ Asynchronous vs. Synchronous ▸ Node.js vs. Java / Python / etc ▸ callback hell / "pyramid of doom"
19. source: http://icompile.eladkarako.com/
20. 20 => ▸ Test scripts are easiest to read when things look like synchronous programming (like Java) ▸ avoid callback hell ▸ promises are an option (.then) ▸ chai-as-promised: ▸ “expect(foo).to.eventually.equal(bar)” ▸ webdriver.io solves this problem behind the scenes
21. 21 WHAT CAN BE TESTED?
22. EXAMPLE FORM EXAMPLE ▸ It should have … ▸ headings, links, tabs ▸ input fields, with placeholders ▸ checkbox, ? (tooltip) ▸ submit button ▸ disabled by default? ▸ requires checkbox? ▸ form validation - What happens on submit? - What happens when form submission is successful - What happens when form submission is unsuccessful - API failure, etc. - Are the form inputs populated? - Is the user given some feedback?
23. 23 CROSS-BROWSER COMPATIBILITY ▸ Chrome ▸ Firefox ▸ Safari ▸ IE ▸ Opera? ▸ PhantomJS
24. EXAMPLE HTTP://TYPO-HUNTER.COM
26. 24 ADDITIONAL POINTS ▸ Environments ▸ Dev / Mock / Integration / E2E / Prod ▸ Mock Data Setup (Why?) ▸ How to turn a story requirements into tests ▸ AAA ▸ Page Objects ▸ Folder Structure