We need a better way to test - Nodevember 2016

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 dives 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. We need a better way to test nodevember.klamp.in
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. Five Why’s* *Not as good as Five Guys®
7. “I can’t log in” The problem
8. Can’t see the form 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. Manual testing is complex and time-consuming Fifth why (the root cause)
13. Test Automation The wonderful, magical, solve-everything and save the world solution* *almost as cool as robots
14. Functional Testing JS Unit Testing
15. Functional Testing 43.678% JS Unit Testing
16. Functional Testing 43.678% JS Unit Testing 60%
17. Hello Hackathon
18. Selenium • Uses real browsers • Programmatic control of them • Free & open-source
19. WebdriverIO • Node.js based • Simplifies commands • Supportive community • Integrations with popular tools
20. Demo
21. Lived happily ever after?
22. Nope
23. “The login is broken” The problem
24. • The styles aren’t right • The update shipped a bug • The code wasn't tested The first three why’s
25. We stopped running the automated tests Fourth why
26. They were hard to use and difficult to maintain Fifth why
27. WebdriverIO isn’t the entire solution
28. 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
29. What we actually needed • Community test environment • Consistent test routine • Digestible test results • Automatic user creation
30. The Black Triangle
31. SingleTrac Entertainment Technologies
32. “In the main engineering room, there was a whoop and cry of success.”
34. What it represents • Rendering engine • Modeling programs • Converter programs • etc...
35. “The rest is just an implementation detail”
36. 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
37. Something to start the tests
38. Somewhere to run test scripts
39. A way to configure test data
40. Somewhere to run Selenium
41. Somewhere to show reports/test history
42. So, what does that look like?
43. Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library
44. Trigger Reporter Test Runner Test Framework Selenium Library Assertion Library Selenium Server Browsers System Under Test Data
45. Trigger Reporter Test Runner Assertion Library Selenium Server Browsers System Under Test Data Test Framework Selenium Library
46. You can do this
47. Convince yourself Tests will make you feel better
48. Convince your teammates Allies will help your battle
49. Convince your boss Tests will save the company money
50. Watch out though
51. Are you ready?
52. Make a black triangle
53. one useful test > many useless ones
54. Learn more
55. frontendtesting.com Includes link to free 6-day email course on Visual Regression Testing
56. learn.webdriver.io nodevember for 50% off this week