We need a better way to test - Nodevember 2016

Slide 1

Slide 1 text

We need a better way to test nodevember.klamp.in

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

Five Why’s* *Not as good as Five Guys®

Slide 7

Slide 7 text

“I can’t log in” The problem

Slide 8

Slide 8 text

Can’t see the form 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

Manual 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* *almost as cool as robots

Slide 14

Slide 14 text

Functional Testing JS Unit Testing

Slide 15

Slide 15 text

Functional Testing 43.678% JS Unit Testing

Slide 16

Slide 16 text

Functional Testing 43.678% JS Unit Testing 60%

Slide 17

Slide 17 text

Hello Hackathon

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Demo

Slide 21

Slide 21 text

Lived happily ever after?

Slide 22

Slide 22 text

Nope

Slide 23

Slide 23 text

“The login is broken” The problem

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

We stopped running the automated tests Fourth why

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

WebdriverIO isn’t the entire solution

Slide 28

Slide 28 text

The first story lied to you • 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 29

Slide 29 text

What we actually needed • Community test environment • Consistent test routine • Digestible test results • Automatic user creation

Slide 30

Slide 30 text

The Black Triangle

Slide 31

Slide 31 text

SingleTrac Entertainment Technologies

Slide 32

Slide 32 text

“In the main engineering room, there was a whoop and cry of success.”

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

What it represents • Rendering engine • Modeling programs • Converter programs • etc...

Slide 35

Slide 35 text

“The rest is just an implementation detail”

Slide 36

Slide 36 text

Our black triangle Test Framework Easy way to trigger test runs Consistent place to run test scripts Interface to add/modify data quickly Consistent place to run Selenium/browsers Visible reports on the test results

Slide 37

Slide 37 text

Something to start the tests

Slide 38

Slide 38 text

Somewhere to run test scripts

Slide 39

Slide 39 text

A way to configure test data

Slide 40

Slide 40 text

Somewhere to run Selenium

Slide 41

Slide 41 text

Somewhere to show reports/test history

Slide 42

Slide 42 text

So, what does that look like?

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

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

You can do this

Slide 47

Slide 47 text

Convince yourself Tests will make you feel better

Slide 48

Slide 48 text

Convince your teammates Allies will help your battle

Slide 49

Slide 49 text

Convince your boss Tests will save the company money

Slide 50

Slide 50 text

Watch out though

Slide 51

Slide 51 text

Are you ready?

Slide 52

Slide 52 text

Make a black triangle

Slide 53

Slide 53 text

one useful test > many useless ones

Slide 54

Slide 54 text

Learn more

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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