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
   

   View 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 Slide

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

   View Slide

4. learn.webdriver.io
   

   View Slide

5. I fixed the CSS
   and broke the website
   

   View Slide

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

   View Slide

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

   View Slide

8. Can’t see the form
   First why
   

   View Slide

9. The update had a bug
   Second why
   

   View Slide

10. It wasn't tested
    Third why
    

    View Slide

11. Not in test plan
    Fourth why
    

    View Slide

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

    View Slide

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

    View Slide

14. Functional Testing
    JS Unit
    Testing
    

    View Slide

15. Functional Testing
    43.678%
    JS Unit
    Testing
    

    View Slide

16. Functional Testing
    43.678%
    JS Unit
    Testing
    60%
    

    View Slide

17. Hello Hackathon
    

    View Slide

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

    View Slide

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

    View Slide

20. Demo
    

    View Slide

21. Lived happily ever
    after?
    

    View Slide

22. Nope
    

    View Slide

23. “The login is broken”
    The problem
    

    View Slide

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

    View Slide

25. We stopped running
    the automated tests
    Fourth why
    

    View Slide

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

    View Slide

27. WebdriverIO isn’t
    the entire solution
    

    View Slide

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
    

    View Slide

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

    View Slide

30. The Black Triangle
    

    View Slide

31. SingleTrac
    Entertainment
    Technologies
    

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

35. “The rest is just an
    implementation detail”
    

    View Slide

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
    

    View Slide

37. Something to start
    the tests
    

    View Slide

38. Somewhere to run
    test scripts
    

    View Slide

39. A way to configure
    test data
    

    View Slide

40. Somewhere to run
    Selenium
    

    View Slide

41. Somewhere to show
    reports/test history
    

    View Slide

42. So, what does that
    look like?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. You can do this
    

    View Slide

47. Convince yourself
    Tests will make you feel better
    

    View Slide

48. Convince your teammates
    Allies will help your battle
    

    View Slide

49. Convince your boss
    Tests will save the company money
    

    View Slide

50. Watch out though
    

    View Slide

51. Are you ready?
    

    View Slide

52. Make a black triangle
    

    View Slide

53. one useful test >
    many useless ones
    

    View Slide

54. Learn more
    

    View Slide

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

    View Slide

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

    View Slide