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

Automated UI Testing

Automated UI Testing

Iteration 2 of my Automated UI Testing talk. Clean up/shortened the slides and added a diagram on the entirety of the testing layer.


Kevin Lamping

November 15, 2016


  1. Automated UI Testing

  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. 5 Why’s

  7. “The login is broken” The problem

  8. The styles aren’t right 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. Testing is complex and time-consuming. Fifth why (the root cause)

  13. Test Automation The wonderful, magical, solve-everything and save the world

  14. Hello Hackathon

  15. Selenium • Uses real browsers • Programmatic control of them

    • Free & open-source
  16. WebdriverIO • Node.js based • Simplifies commands • Supportive community

    • Integrations with popular tools
  17. Demo

  18. Lived happily ever after?

  19. Nope

  20. “The login is broken” The problem

  21. • The styles aren’t right • The update shipped a

    bug • The code wasn't tested The first three why’s
  22. We stopped running the automated tests Fourth why

  23. They were hard to use and difficult to maintain Fifth

  24. WebdriverIO isn’t the entire solution

  25. What the first story hid • 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
  26. What we needed

  27. Automatic user creation

  28. Community test environment

  29. Consistent test routine

  30. Digestible test results

  31. The Black Triangle

  32. Game dev team

  33. What it represented: • Rendering engine • Modeling programs •

    Converter programs • etc...
  34. Our black triangle Test Framework Way to add/modify data easily

    Common place to run Selenium Common place to run test scripts Way to trigger to test runs Way to report on the test results
  35. A way to configure test data

  36. Somewhere to run Selenium

  37. Something to run test scripts

  38. Something to start the tests

  39. Somewhere to store report history

  40. So, what does that look like?

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

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

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

    Under Test Data Test Framework Selenium Library
  44. A thing or two about maintainable tests

  45. Know the state of things

  46. Look at… • Priority • Complexity • Stability

  47. Priority • Key functionality • Login & Registration • Checkout

    Flow • Edge Cases
  48. Complexity • Difficult to test: • Animations • Visual Differences

    • 3rd party calls
  49. Stability • How likely are things to change?

  50. Make pain visible

  51. Learn “Page Objects”

  52. Are you ready?

  53. Convince yourself and your boss & co-workers

  54. Save time & money if you let them

  55. Make a black triangle

  56. one useful test > many useless ones

  57. Learn more

  58. frontendtesting.com Includes link to free 6-day email course on Visual

    Regression Testing
  59. learn.webdriver.io SAWEBDEV for 50% off this week