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

We need a better way to test - Nodevember 2016

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
Tweet

More Decks by Kevin Lamping

Other Decks in Technology

Transcript

  1. We need a better way to test
    nodevember.klamp.in

    View full-size slide

  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.

    View full-size slide

  3. parentprogramming.xyz
    A podcast about parenting in the tech industry

    View full-size slide

  4. learn.webdriver.io

    View full-size slide

  5. I fixed the CSS
    and broke the website

    View full-size slide

  6. Five Why’s*
    *Not as good as Five Guys®

    View full-size slide

  7. “I can’t log in”
    The problem

    View full-size slide

  8. Can’t see the form
    First why

    View full-size slide

  9. The update had a bug
    Second why

    View full-size slide

  10. It wasn't tested
    Third why

    View full-size slide

  11. Not in test plan
    Fourth why

    View full-size slide

  12. Manual testing is complex
    and time-consuming
    Fifth why
    (the root cause)

    View full-size slide

  13. Test Automation
    The wonderful, magical, solve-everything and save
    the world solution*
    *almost as cool as robots

    View full-size slide

  14. Functional Testing
    JS Unit
    Testing

    View full-size slide

  15. Functional Testing
    43.678%
    JS Unit
    Testing

    View full-size slide

  16. Functional Testing
    43.678%
    JS Unit
    Testing
    60%

    View full-size slide

  17. Hello Hackathon

    View full-size slide

  18. Selenium
    • Uses real browsers
    • Programmatic control of them
    • Free & open-source

    View full-size slide

  19. WebdriverIO
    • Node.js based
    • Simplifies commands
    • Supportive community
    • Integrations with popular tools

    View full-size slide

  20. Lived happily ever
    after?

    View full-size slide

  21. “The login is broken”
    The problem

    View full-size slide

  22. • The styles aren’t right
    • The update shipped a bug
    • The code wasn't tested
    The first three why’s

    View full-size slide

  23. We stopped running
    the automated tests
    Fourth why

    View full-size slide

  24. They were hard to use
    and difficult to maintain
    Fifth why

    View full-size slide

  25. WebdriverIO isn’t
    the entire solution

    View full-size slide

  26. 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

    View full-size slide

  27. What we actually needed
    • Community test environment
    • Consistent test routine
    • Digestible test results
    • Automatic user creation

    View full-size slide

  28. The Black Triangle

    View full-size slide

  29. SingleTrac
    Entertainment
    Technologies

    View full-size slide

  30. “In the main engineering
    room, there was a whoop
    and cry of success.”

    View full-size slide

  31. What it represents
    • Rendering engine
    • Modeling programs
    • Converter programs
    • etc...

    View full-size slide

  32. “The rest is just an
    implementation detail”

    View full-size slide

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

    View full-size slide

  34. Something to start
    the tests

    View full-size slide

  35. Somewhere to run
    test scripts

    View full-size slide

  36. A way to configure
    test data

    View full-size slide

  37. Somewhere to run
    Selenium

    View full-size slide

  38. Somewhere to show
    reports/test history

    View full-size slide

  39. So, what does that
    look like?

    View full-size slide

  40. Trigger
    Reporter
    Test
    Runner
    Assertion
    Library
    Selenium
    Server
    Browsers
    System
    Under
    Test
    Data
    Test
    Framework
    Selenium
    Library

    View full-size slide

  41. Trigger
    Reporter
    Test
    Runner
    Test
    Framework
    Selenium
    Library
    Assertion
    Library
    Selenium
    Server
    Browsers
    System
    Under
    Test
    Data

    View full-size slide

  42. Trigger
    Reporter
    Test
    Runner
    Assertion
    Library
    Selenium
    Server
    Browsers
    System
    Under
    Test
    Data
    Test
    Framework
    Selenium
    Library

    View full-size slide

  43. You can do this

    View full-size slide

  44. Convince yourself
    Tests will make you feel better

    View full-size slide

  45. Convince your teammates
    Allies will help your battle

    View full-size slide

  46. Convince your boss
    Tests will save the company money

    View full-size slide

  47. Watch out though

    View full-size slide

  48. Are you ready?

    View full-size slide

  49. Make a black triangle

    View full-size slide

  50. one useful test >
    many useless ones

    View full-size slide

  51. frontendtesting.com
    Includes link to free 6-day email course on Visual
    Regression Testing

    View full-size slide

  52. learn.webdriver.io
    nodevember for 50% off this week

    View full-size slide