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.

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