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

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
Tweet

More Decks by Kevin Lamping

Other Decks in Technology

Transcript

  1. @klamping
    #UITesting
    Automated UI
    Testing And You

    View Slide

  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.

    View Slide

  3. @klamping
    #UITesting
    parentprogramming.xyz
    A podcast about parenting in the tech industry

    View Slide

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

    View Slide

  5. @klamping
    #UITesting
    But why?

    View Slide

  6. @klamping
    #UITesting
    5 Why’s

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. @klamping
    #UITesting
    Test Automation
    The fix

    View Slide

  14. @klamping
    #UITesting
    Selenium Automation
    Uses real browsers
    Programmatic
    control of them
    Free & open-source

    View Slide

  15. @klamping
    #UITesting
    WebdriverIO
    Node.js Based
    Streamlined commands
    Lots of integrations
    and support

    View Slide

  16. @klamping
    #UITesting
    Hello Hackathon

    View Slide

  17. @klamping
    #UITesting
    Demo

    View Slide

  18. @klamping
    #UITesting
    Lived happily
    ever after?

    View Slide

  19. @klamping
    #UITesting
    Nope

    View Slide

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

    View Slide

  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

    View Slide

  22. @klamping
    #UITesting
    We stopped running
    our automated tests
    Fourth why

    View Slide

  23. @klamping
    #UITesting
    They were hard to run and
    it was easier just to
    manually test
    Fifth why

    View Slide

  24. @klamping
    #UITesting
    How to Keep UI Tests Useful
    and
    Not Horrendous to
    Maintain

    View Slide

  25. @klamping
    #UITesting
    The Black
    Triangle

    View Slide

  26. @klamping
    #UITesting
    Game dev team

    View Slide

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

    View Slide

  28. @klamping
    #UITesting
    Better to have one
    highly polished and
    visible test than a whole
    bunch of invisible ones

    View Slide

  29. @klamping
    #UITesting
    WebdriverIO is just
    one piece of the
    automated testing
    puzzle

    View Slide

  30. @klamping
    #UITesting
    The user can login.

    View Slide

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

    View Slide

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

    View Slide

  33. @klamping
    #UITesting
    Data Variations

    View Slide

  34. @klamping
    #UITesting
    Code pipelines

    View Slide

  35. @klamping
    #UITesting
    Visible test reports

    View Slide

  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

    View Slide

  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

    View Slide

  38. @klamping
    #UITesting
    Test framework

    View Slide

  39. @klamping
    #UITesting
    Computer to run
    selenium on

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  46. @klamping
    #UITesting
    Know the state
    of things

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. @klamping
    #UITesting
    Make pain visible

    View Slide

  52. @klamping
    #UITesting
    Use Page Objects

    View Slide

  53. @klamping
    #UITesting
    Next Steps

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. @klamping
    #UITesting
    Demonstrate
    usefulness

    View Slide

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

    View Slide

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

    View Slide

  60. @klamping
    #UITesting
    Learn More
    frontendtesting.com

    View Slide