Automated UI Testing - Speaker Deck

Slide 1

Slide 1 text

Automated UI Testing

Slide 2

Slide 2 text

I’m Kevin Lamping Front-end Engineer, Father, Husband, Disc Golfer, Stargazer, Gardener, Gamer, Geek, Soccer Player, Scale Modeler, Piano Player, Spurs Fan, Freelancer, Teacher, Writer, Designer, Developer, RC Plane/ Heli Pilot, et cetera.

Slide 3

Slide 3 text

parentprogramming.xyz A podcast about parenting in the tech industry

Slide 4

Slide 4 text

learn.webdriver.io

Slide 5

Slide 5 text

I fixed the CSS and broke the website

Slide 6

Slide 6 text

5 Why’s

Slide 7

Slide 7 text

“The login is broken” The problem

Slide 8

Slide 8 text

The styles aren’t right First why

Slide 9

Slide 9 text

The update had a bug Second why

Slide 10

Slide 10 text

It wasn't tested Third why

Slide 11

Slide 11 text

Not in test plan Fourth why

Slide 12

Slide 12 text

Testing is complex and time-consuming. Fifth why (the root cause)

Slide 13

Slide 13 text

Test Automation The wonderful, magical, solve-everything and save the world solution

Slide 14

Slide 14 text

Hello Hackathon

Slide 15

Slide 15 text

Selenium • Uses real browsers • Programmatic control of them • Free & open-source

Slide 16

Slide 16 text

WebdriverIO • Node.js based • Simpliﬁes commands • Supportive community • Integrations with popular tools

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

Lived happily ever after?

Slide 19

Slide 19 text

Nope

Slide 20

Slide 20 text

“The login is broken” The problem

Slide 21

Slide 21 text

• The styles aren’t right • The update shipped a bug • The code wasn't tested The ﬁrst three why’s

Slide 22

Slide 22 text

We stopped running the automated tests Fourth why

Slide 23

Slide 23 text

They were hard to use and diﬀicult to maintain Fifth why

Slide 24

Slide 24 text

WebdriverIO isn’t the entire solution

Slide 25

Slide 25 text

What the first story hid • Users had to be manually created • Tests only ran on a few developer’s laptops • Selenium had inconsistent results • Manual validation was required • Other teams code updates weren’t tested

Slide 26

Slide 26 text

What we needed

Slide 27

Slide 27 text

Automatic user creation

Slide 28

Slide 28 text

Community test environment

Slide 29

Slide 29 text

Consistent test routine

Slide 30

Slide 30 text

Digestible test results

Slide 31

Slide 31 text

The Black Triangle

Slide 32

Slide 32 text

Game dev team

Slide 33

Slide 33 text

What it represented: • Rendering engine • Modeling programs • Converter programs • etc...

Slide 34

Slide 34 text

Our black triangle Test Framework Way to add/modify data easily Common place to run Selenium Common place to run test scripts Way to trigger to test runs Way to report on the test results

Slide 35

Slide 35 text

A way to configure test data

Slide 36

Slide 36 text

Somewhere to run Selenium

Slide 37

Slide 37 text

Something to run test scripts

Slide 38

Slide 38 text

Something to start the tests

Slide 39

Slide 39 text

Somewhere to store report history

Slide 40

Slide 40 text

So, what does that look like?

Slide 41

Slide 41 text

Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library

Slide 42

Slide 42 text

Trigger Reporter Test Runner Test Framework Selenium Library Assertion Library Selenium Server Browsers System Under Test Data

Slide 43

Slide 43 text

Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library

Slide 44

Slide 44 text

A thing or two about maintainable tests

Slide 45

Slide 45 text

Know the state of things

Slide 46

Slide 46 text

Look at… • Priority • Complexity • Stability

Slide 47

Slide 47 text

Priority • Key functionality • Login & Registration • Checkout Flow • Edge Cases

Slide 48

Slide 48 text

Complexity • Difﬁcult to test: • Animations • Visual Differences • 3rd party calls

Slide 49

Slide 49 text

Stability • How likely are things to change?

Slide 50

Slide 50 text

Make pain visible

Slide 51

Slide 51 text

Learn “Page Objects”

Slide 52

Slide 52 text

Are you ready?

Slide 53

Slide 53 text

Convince yourself and your boss & co-workers

Slide 54

Slide 54 text

Save time & money if you let them

Slide 55

Slide 55 text

Make a black triangle

Slide 56

Slide 56 text

one useful test > many useless ones

Slide 57

Slide 57 text

Learn more

Slide 58

Slide 58 text

frontendtesting.com Includes link to free 6-day email course on Visual Regression Testing

Slide 59

Slide 59 text

learn.webdriver.io SAWEBDEV for 50% off this week