Automated UI Testing

Iteration 2 of my Automated UI Testing talk. Clean up/shortened the slides and added a diagram on the entirety of the testing layer.

Transcript

1. Automated UI Testing
2. 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.
3. parentprogramming.xyz A podcast about parenting in the tech industry
4. learn.webdriver.io
5. I fixed the CSS and broke the website
6. 5 Why’s
7. “The login is broken” The problem
8. The styles aren’t right First why
9. The update had a bug Second why
10. It wasn't tested Third why
11. Not in test plan Fourth why
12. Testing is complex and time-consuming. Fifth why (the root cause)
13. Test Automation The wonderful, magical, solve-everything and save the world solution
14. Hello Hackathon
15. Selenium • Uses real browsers • Programmatic control of them • Free & open-source
16. WebdriverIO • Node.js based • Simplifies commands • Supportive community • Integrations with popular tools
17. Demo
18. Lived happily ever after?
19. Nope
20. “The login is broken” The problem
21. • The styles aren’t right • The update shipped a bug • The code wasn't tested The first three why’s
22. We stopped running the automated tests Fourth why
23. They were hard to use and difficult to maintain Fifth why
24. WebdriverIO isn’t the entire solution
25. 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
26. What we needed
27. Automatic user creation
28. Community test environment
29. Consistent test routine
30. Digestible test results
31. The Black Triangle
32. Game dev team
33. What it represented: • Rendering engine • Modeling programs • Converter programs • etc...
34. 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
35. A way to configure test data
36. Somewhere to run Selenium
37. Something to run test scripts
38. Something to start the tests
39. Somewhere to store report history
40. So, what does that look like?
41. Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library
42. Trigger Reporter Test Runner Test Framework Selenium Library Assertion Library Selenium Server Browsers System Under Test Data
43. Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library
44. A thing or two about maintainable tests
45. Know the state of things
46. Look at… • Priority • Complexity • Stability
47. Priority • Key functionality • Login & Registration • Checkout Flow • Edge Cases
48. Complexity • Difficult to test: • Animations • Visual Differences • 3rd party calls
49. Stability • How likely are things to change?
50. Make pain visible
51. Learn “Page Objects”
52. Are you ready?
53. Convince yourself and your boss & co-workers
54. Save time & money if you let them
55. Make a black triangle
56. one useful test > many useless ones
57. Learn more
58. frontendtesting.com Includes link to free 6-day email course on Visual Regression Testing
59. learn.webdriver.io SAWEBDEV for 50% off this week