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

Automated UI Testing And You

Automated UI Testing And You

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 dive deep 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

October 17, 2016


  1. @klamping #UITesting Automated UI Testing And You

  2. @klamping #UITesting I’m Kevin Lamping Keywords: Front-end Engineer, Father, Husband,

    Disc Golfer, Stargazer, Gardener, Gamer, Geek, Soccer Player, Scale Modeller, Piano Player, Spurs Fan, Freelancer, Teacher, Writer, Designer, Developer, RC Plane/Heli Pilot , et cetera.
  3. @klamping #UITesting parentprogramming.xyz A podcast about parenting in the tech

  4. @klamping #UITesting TIFU by fixing the CSS and breaking production

  5. @klamping #UITesting But why?

  6. @klamping #UITesting 5 Why’s

  7. @klamping #UITesting “The login is broken” The problem

  8. @klamping #UITesting The CSS isn't displaying properly First why

  9. @klamping #UITesting The code update shipped a bug Second why

  10. @klamping #UITesting The update wasn't properly tested Third why

  11. @klamping #UITesting Testers didn't check this specific scenario Fourth why

  12. @klamping #UITesting Manual testing is complex and time-consuming. Fifth why

    (the root cause)
  13. @klamping #UITesting Test Automation The fix

  14. @klamping #UITesting Selenium Automation Uses real browsers Programmatic control of

    them Free & open-source
  15. @klamping #UITesting WebdriverIO Node.js Based Streamlined commands Lots of integrations

    and support
  16. @klamping #UITesting Hello Hackathon

  17. @klamping #UITesting Demo

  18. @klamping #UITesting Lived happily ever after?

  19. @klamping #UITesting Nope

  20. @klamping #UITesting “The login is broken” The problem

  21. @klamping #UITesting The CSS isn't displaying properly The code update

    shipped a bug The update wasn't properly tested The first three why’s
  22. @klamping #UITesting We stopped running our automated tests Fourth why

  23. @klamping #UITesting They were hard to run and it was

    easier just to manually test Fifth why
  24. @klamping #UITesting How to Keep UI Tests Useful and Not

    Horrendous to Maintain
  25. @klamping #UITesting The Black Triangle

  26. @klamping #UITesting Game dev team

  27. @klamping #UITesting It represents: Rendering engine Modeling programs Converter programs

  28. @klamping #UITesting Better to have one highly polished and visible

    test than a whole bunch of invisible ones
  29. @klamping #UITesting WebdriverIO is just one piece of the automated

    testing puzzle
  30. @klamping #UITesting The user can login.

  31. @klamping #UITesting That's actually a fair amount of work

  32. @klamping #UITesting A way to create test users

  33. @klamping #UITesting Data Variations

  34. @klamping #UITesting Code pipelines

  35. @klamping #UITesting Visible test reports

  36. @klamping #UITesting What the first story hid Required a user

    to be created on server Only ran locally Needed selenium installed locally\ Code updates from other teams weren’t tested Tests required manual validation
  37. @klamping #UITesting What tests really need Test Framework Code Repository

    for Tests Selenium box to run selenium on Server to run test scripts on API hooks to trigger test scripts to run API hooks to listen to results of tests Server to host report/test history Interface to programmatically modify data for a server
  38. @klamping #UITesting Test framework

  39. @klamping #UITesting Computer to run selenium on

  40. @klamping #UITesting Server to run test scripts on

  41. @klamping #UITesting Way to trigger test scripts to run automatically

  42. @klamping #UITesting Way to report results of tests

  43. @klamping #UITesting Server to host report & test history

  44. @klamping #UITesting Data interface to programmatically update information on a

  45. @klamping #UITesting "Not horrendous to maintain"

  46. @klamping #UITesting Know the state of things

  47. @klamping #UITesting Look at… Priority Complexity Stability

  48. @klamping #UITesting Priority Key functionality Login & Registration Checkout Flow

    Edge Cases
  49. @klamping #UITesting Complexity Difficult to test: Animations Visual Differences 3rd

    party calls
  50. @klamping #UITesting Stability How likely are things to change?

  51. @klamping #UITesting Make pain visible

  52. @klamping #UITesting Use Page Objects

  53. @klamping #UITesting Next Steps

  54. @klamping #UITesting Get your black triangle testyourlog.in

  55. @klamping #UITesting Convince Your BOSS and co-workers

  56. @klamping #UITesting Tests save time and money if you let

  57. @klamping #UITesting Demonstrate usefulness

  58. @klamping #UITesting Learn More learn.webdriver.io Use code cssdevconf2016 for 50%

  59. @klamping #UITesting Learn More visualregression testing.com

  60. @klamping #UITesting Learn More frontendtesting.com