$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Kevin Lamping

Other Decks in Technology

Transcript

  1. Automated UI Testing

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

    View Slide

  7. “The login is broken”
    The problem

    View Slide

  8. The styles aren’t right
    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. 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

    View Slide

  14. Hello Hackathon

    View Slide

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

    View Slide

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

    View Slide

  17. Demo

    View Slide

  18. Lived happily ever
    after?

    View Slide

  19. Nope

    View Slide

  20. “The login is broken”
    The problem

    View Slide

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

    View Slide

  22. We stopped running
    the automated tests
    Fourth why

    View Slide

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

    View Slide

  24. WebdriverIO isn’t
    the entire solution

    View Slide

  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

    View Slide

  26. What we needed

    View Slide

  27. Automatic user
    creation

    View Slide

  28. Community test
    environment

    View Slide

  29. Consistent test
    routine

    View Slide

  30. Digestible test
    results

    View Slide

  31. The Black Triangle

    View Slide

  32. Game dev team

    View Slide

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

    View Slide

  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

    View Slide

  35. A way to configure
    test data

    View Slide

  36. Somewhere to run
    Selenium

    View Slide

  37. Something to run
    test scripts

    View Slide

  38. Something to start
    the tests

    View Slide

  39. Somewhere to store
    report history

    View Slide

  40. So, what does that
    look like?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. A thing or two about
    maintainable tests

    View Slide

  45. Know the state of
    things

    View Slide

  46. Look at…
    • Priority
    • Complexity
    • Stability

    View Slide

  47. Priority
    • Key functionality
    • Login & Registration
    • Checkout Flow
    • Edge Cases

    View Slide

  48. Complexity
    • Difficult to test:
    • Animations
    • Visual Differences
    • 3rd party calls

    View Slide

  49. Stability
    • How likely are things to change?

    View Slide

  50. Make pain visible

    View Slide

  51. Learn “Page Objects”

    View Slide

  52. Are you ready?

    View Slide

  53. Convince yourself
    and your boss & co-workers

    View Slide

  54. Save time & money
    if you let them

    View Slide

  55. Make a black triangle

    View Slide

  56. one useful test >
    many useless ones

    View Slide

  57. Learn more

    View Slide

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

    View Slide

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

    View Slide