Browser Automation Testing With JavaScript

Slide 1

Slide 1 text

BROWSER AUTOMATION TESTING WITH JAVASCRIPT AN INTRODUCTION TO

Slide 2

Slide 2 text

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]

Slide 3

Slide 3 text

5WH QUESTIONS…

Slide 4

Slide 4 text

4 UNIT TESTS FUNCTIONAL TESTS ▸ test individual components ▸ controllers ▸ directives ▸ services ▸ ﬁlters ▸ etc. ▸ test the application ▸ interact like a user ▸ runs in a browser

Slide 5

Slide 5 text

WHY? REASONS FOR AUTOMATED TESTING ▸ conﬁdence ▸ ability to work quickly ▸ ability to refactor with courage ▸ avoid regressions ▸ CI-CD (Jenkins / PR-builder / etc) ▸ manual testing is expensive

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

AN EXAMPLE https://youtu.be/2oxkduJ0Pc0

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

PROFICIENCY WITH TESTING IS REQUIRED UI ENGINEERS / FRONT-END DEVS CURRENT JOB POSTINGS:

Slide 11

Slide 11 text

11 TOOLS ▸ Selenium WebDriver ▸ the de facto standard ▸ written in Java ▸ synchronous-style ▸ webdriver.io ▸ http://webdriver.io/ ▸ Selenium 2.0 bindings for NodeJS

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

13 TOOLS (CONTINUED) ▸ Protractor ▸ an end-to-end test framework ▸ speciﬁcally for AngularJS applications ▸ tests run in a real browser ▸ interact with the application as a user would ▸ http://www.protractortest.org/

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

FRAMEWORK ASSERTIONS

Slide 16

Slide 16 text

THAT SEEMS LIKE A LOT OF STUFF TO WIRE UP… WEBDRIVER.IO + MOCHA + CHAI

Slide 17

Slide 17 text

Enter Chimp… Opinionated Choices = Easy Setup

Slide 18

Slide 18 text

18 HURDLES WITH JAVASCRIPT ▸ Asynchronous vs. Synchronous ▸ Node.js vs. Java / Python / etc ▸ callback hell / "pyramid of doom"

Slide 19

Slide 19 text

source: http://icompile.eladkarako.com/

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 WHAT CAN BE TESTED?

Slide 22

Slide 22 text

EXAMPLE FORM EXAMPLE ▸ It should have … ▸ headings, links, tabs ▸ input ﬁelds, 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?

Slide 23

Slide 23 text

23 CROSS-BROWSER COMPATIBILITY ▸ Chrome ▸ Firefox ▸ Safari ▸ IE ▸ Opera? ▸ PhantomJS