Automated UI Testing And You

How often do you make a change to your site that causes an unexpected issue in some unrelated page? At least once a week, right? But manually testing every page for every change is time consuming and a pain in the butt.

This talk will dive deep in to WebdriverIO, an open-source library used for automated testing. We'll cover what it takes to get started writing automated browser tests, so that you can write and release code with confidence.
Notes at: https://workflowy.com/s/eKx3scHfuy

Transcript

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