Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Automation Testing With JavaScript

Browser Automation Testing With JavaScript

SAWebDev Meetup - August 16, 2016
San Antonio, Texas

Avatar for Eric Carraway

Eric Carraway

August 16, 2016
Tweet

More Decks by Eric Carraway

Other Decks in Programming

Transcript

  1. ABOUT ME ERIC CARRAWAY ▸ UI Engineer at Rackspace working

    primarily in JavaScript ▸ Coding Bootcamp Graduate ▸ Former High School Band Director ▸ Musician / Teacher Contact: [email protected]
  2. 4 UNIT TESTS FUNCTIONAL TESTS ▸ test individual components ▸

    controllers ▸ directives ▸ services ▸ filters ▸ etc. ▸ test the application ▸ interact like a user ▸ runs in a browser
  3. 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
  4. 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
  5. 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?
  6. 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?
  7. 11 TOOLS ▸ Selenium WebDriver ▸ the de facto standard

    ▸ written in Java ▸ synchronous-style ▸ webdriver.io ▸ http://webdriver.io/ ▸ Selenium 2.0 bindings for NodeJS
  8. 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/
  9. THAT SEEMS LIKE A LOT OF STUFF TO WIRE UP…

    WEBDRIVER.IO + MOCHA + CHAI
  10. 18 HURDLES WITH JAVASCRIPT ▸ Asynchronous vs. Synchronous ▸ Node.js

    vs. Java / Python / etc ▸ callback hell / "pyramid of doom"
  11. 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
  12. 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?
  13. 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