Upgrade to Pro — share decks privately, control downloads, hide ads and more …

We need a better way to test - Nodevember 2016

6823d6d1ee14bd068007bd60ddb6a41a?s=47 Kevin Lamping
November 20, 2016

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


Kevin Lamping

November 20, 2016


  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

  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

  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.”
  33. None
  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