Slide 1
Slide 1 text
@klamping
#UITesting
Automated UI
Testing And You
Slide 2
Slide 2 text
@klamping
#UITesting
I’m
Kevin
Lamping
Keywords: Front-end Engineer, Father,
Husband, Disc Golfer, Stargazer, Gardener,
Gamer, Geek, Soccer Player, Scale Modeller,
Piano Player, Spurs Fan, Freelancer, Teacher,
Writer, Designer, Developer, RC Plane/Heli
Pilot
, et cetera.
Slide 3
Slide 3 text
@klamping
#UITesting
parentprogramming.xyz
A podcast about parenting in the tech industry
Slide 4
Slide 4 text
@klamping
#UITesting
TIFU
by fixing the CSS
and breaking production
Slide 5
Slide 5 text
@klamping
#UITesting
But why?
Slide 6
Slide 6 text
@klamping
#UITesting
5 Why’s
Slide 7
Slide 7 text
@klamping
#UITesting
“The login is broken”
The problem
Slide 8
Slide 8 text
@klamping
#UITesting
The CSS isn't
displaying properly
First why
Slide 9
Slide 9 text
@klamping
#UITesting
The code update
shipped a bug
Second why
Slide 10
Slide 10 text
@klamping
#UITesting
The update wasn't
properly tested
Third why
Slide 11
Slide 11 text
@klamping
#UITesting
Testers didn't check
this specific scenario
Fourth why
Slide 12
Slide 12 text
@klamping
#UITesting
Manual testing is complex
and time-consuming.
Fifth why
(the root cause)
Slide 13
Slide 13 text
@klamping
#UITesting
Test Automation
The fix
Slide 14
Slide 14 text
@klamping
#UITesting
Selenium Automation
Uses real browsers
Programmatic
control of them
Free & open-source
Slide 15
Slide 15 text
@klamping
#UITesting
WebdriverIO
Node.js Based
Streamlined commands
Lots of integrations
and support
Slide 16
Slide 16 text
@klamping
#UITesting
Hello Hackathon
Slide 17
Slide 17 text
@klamping
#UITesting
Demo
Slide 18
Slide 18 text
@klamping
#UITesting
Lived happily
ever after?
Slide 19
Slide 19 text
@klamping
#UITesting
Nope
Slide 20
Slide 20 text
@klamping
#UITesting
“The login is broken”
The problem
Slide 21
Slide 21 text
@klamping
#UITesting
The CSS isn't displaying properly
The code update shipped a bug
The update wasn't properly tested
The first three
why’s
Slide 22
Slide 22 text
@klamping
#UITesting
We stopped running
our automated tests
Fourth why
Slide 23
Slide 23 text
@klamping
#UITesting
They were hard to run and
it was easier just to
manually test
Fifth why
Slide 24
Slide 24 text
@klamping
#UITesting
How to Keep UI Tests Useful
and
Not Horrendous to
Maintain
Slide 25
Slide 25 text
@klamping
#UITesting
The Black
Triangle
Slide 26
Slide 26 text
@klamping
#UITesting
Game dev team
Slide 27
Slide 27 text
@klamping
#UITesting
It represents:
Rendering engine
Modeling programs
Converter programs
etc...
Slide 28
Slide 28 text
@klamping
#UITesting
Better to have one
highly polished and
visible test than a whole
bunch of invisible ones
Slide 29
Slide 29 text
@klamping
#UITesting
WebdriverIO is just
one piece of the
automated testing
puzzle
Slide 30
Slide 30 text
@klamping
#UITesting
The user can login.
Slide 31
Slide 31 text
@klamping
#UITesting
That's actually a
fair amount of work
Slide 32
Slide 32 text
@klamping
#UITesting
A way to create
test users
Slide 33
Slide 33 text
@klamping
#UITesting
Data Variations
Slide 34
Slide 34 text
@klamping
#UITesting
Code pipelines
Slide 35
Slide 35 text
@klamping
#UITesting
Visible test reports
Slide 36
Slide 36 text
@klamping
#UITesting
What the first story hid
Required a user to be created on
server
Only ran locally
Needed selenium installed locally\
Code updates from other teams
weren’t tested
Tests required manual validation
Slide 37
Slide 37 text
@klamping
#UITesting
What tests really need
Test Framework
Code Repository for Tests
Selenium box to run selenium on
Server to run test scripts on
API hooks to trigger test scripts to run
API hooks to listen to results of tests
Server to host report/test history
Interface to programmatically modify data
for a server
Slide 38
Slide 38 text
@klamping
#UITesting
Test framework
Slide 39
Slide 39 text
@klamping
#UITesting
Computer to run
selenium on
Slide 40
Slide 40 text
@klamping
#UITesting
Server to run
test scripts on
Slide 41
Slide 41 text
@klamping
#UITesting
Way to trigger
test scripts to
run automatically
Slide 42
Slide 42 text
@klamping
#UITesting
Way to report
results of tests
Slide 43
Slide 43 text
@klamping
#UITesting
Server to host
report & test
history
Slide 44
Slide 44 text
@klamping
#UITesting
Data interface to
programmatically
update information on
a server
Slide 45
Slide 45 text
@klamping
#UITesting
"Not horrendous
to maintain"
Slide 46
Slide 46 text
@klamping
#UITesting
Know the state
of things
Slide 47
Slide 47 text
@klamping
#UITesting
Look at…
Priority
Complexity
Stability
Slide 48
Slide 48 text
@klamping
#UITesting
Priority
Key functionality
Login & Registration
Checkout Flow
Edge Cases
Slide 49
Slide 49 text
@klamping
#UITesting
Complexity
Difficult to test:
Animations
Visual Differences
3rd party calls
Slide 50
Slide 50 text
@klamping
#UITesting
Stability
How likely are
things to change?
Slide 51
Slide 51 text
@klamping
#UITesting
Make pain visible
Slide 52
Slide 52 text
@klamping
#UITesting
Use Page Objects
Slide 53
Slide 53 text
@klamping
#UITesting
Next Steps
Slide 54
Slide 54 text
@klamping
#UITesting
Get your black
triangle
testyourlog.in
Slide 55
Slide 55 text
@klamping
#UITesting
Convince Your
BOSS
and co-workers
Slide 56
Slide 56 text
@klamping
#UITesting
Tests save time
and money
if you let them
Slide 57
Slide 57 text
@klamping
#UITesting
Demonstrate
usefulness
Slide 58
Slide 58 text
@klamping
#UITesting
Learn More
learn.webdriver.io
Use code cssdevconf2016 for 50% off
Slide 59
Slide 59 text
@klamping
#UITesting
Learn More
visualregression
testing.com
Slide 60
Slide 60 text
@klamping
#UITesting
Learn More
frontendtesting.com