Building an Effective Front-end Testing Discipline Step-by-Step

For years, Front-end Developers have dealt with the pain of browser-based bugs and the difficulty of testing hundreds of scenarios. They’re itching for help, but have struggled to find a solution that scales past a few simple tests. The have the skills to write test automation, just not the support.

Now, more than ever, is the time to team up Front-end Developers with QA teams. So much functionality has shifted to the front-end that past practices will no longer work. We need to focus on solid solutions that have been proven in the workforce.

In this session you’ll learn how you can build a Front-end Testing Discipline using several different tools and techniques, along with patterns to follow in organization at various levels.

Transcript

1. Building an Effective
   Front-end Testing Discipline
   Step-by-Step
   Kevin Lamping
   Front-end Engineer & Tester
   

   View Slide

2. What we’re
   going to
   talk about
   1) Why are front-end devs suffering?
   2) What tools ease their pains?
   3) Building a testing discipline
   4) Tips for a happier workplace
   

   View Slide

3. I’ve got problems…
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

4. I’ve got problems…
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

5. I’ve got problems…
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

6. I’ve got problems…
   Image credit: https://www.designersinsights.com/designer-resources/designing-responsive-website/
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

7. I’ve got problems…
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

8. I’ve got problems…
   Image credit: https://www.designersinsights.com/designer-resources/designing-responsive-website/
   Slides: https://bit.ly/2wyaLAW
   

   View Slide

9. I’ve got problems…
   Slides: https://bit.ly/2wyaLAW
   5+ Browsers 6+ Screen Sizes 4+ OSes Infinite edge cases
   

   View Slide

10. I’ve got (more) problems…
    Home
    About Us
    Contact Us
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

11. I’ve got (more) problems…
    Home
    About Us
    Contact Us
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

12. I’ve got (more) problems…
    Home
    About Us
    Contact Us
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

13. I’ve got (more) problems…
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

14. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (Static)
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

15. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (Static)
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

16. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (dynamic)
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

17. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (dynamic)
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

18. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (interactive)
    Datastore
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

19. I’ve got (even more) problems…
    Persistant Data
    Business Logic
    View Logic
    UI (interactive)
    Datastore
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

20. I’ve got (so many) problems…
    Home
    About Us
    Contact Us
    Navigation
    Form Inputs
    Buttons
    Popovers
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

21. Why
    Front-end
    Testing?
    - Wide variety of supported devices
    - Increased reliance on functionality
    - Performance & usability pay off
    - High utilization of 3rd-party code
    

    View Slide

22. My magical toolbox
    

    View Slide

23. Front-end
    Testing
    Wishlist
    - Plethora of devices to test on
    - Resilient and useful test suites
    - Consistent test environments
    - Configurable test data
    

    View Slide

24. Device Testing
    Why it’s needed
    Quickly, easily test functionality across
    devices
    Traditional
    Approach
    Physical devices in the office
    Why that
    doesn’t help
    Difficult to maintain; extra effort to use
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

25. Device Testing
    Front-end Friendly Solutions
    Virtual Devices: Sauce Labs, Browserstack, TestingBot
    Physical devices connected via browsersync.io
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

26. Visual Testing
    Why it’s needed
    Visual issues can be big bugs,
    even if software “works”
    Traditional
    Approach
    Manual Visual Validation
    Why that
    doesn’t help
    Not trained to noticed small changes
    Focused on functionality, not design
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

27. Visual Testing
    Slides: https://bit.ly/2wyaLAW
    Front-end Friendly Solutions
    Automated Screenshot Comparison
    Applitools
    

    View Slide

28. Pattern Libraries
    Why it’s needed Documents core design of a site
    Traditional
    Approach
    Design team writes static style guide
    Why that
    doesn’t help
    Quickly goes out of date
    Doesn’t reflect actual implementation
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

29. Pattern Libraries
    Front-end Friendly Solutions
    Online “Living” Style Guides
    StorybookJS, styleguides.io
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

30. Mock APIs
    Why it’s needed Quicker, more reliable testing
    Traditional
    Approach
    Full server running on dev’s computer
    Why that
    doesn’t help
    Complex, prone to errors after updates
    Dependency and database issues
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

31. Mock APIs
    Front-end Friendly Solutions
    “Black box of data”
    NockJS, fakejson.com, Postman
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

32. Functional Testing
    Why it’s needed Reduces reliance on manual testing
    Traditional
    Approach
    Java-based Selenium
    Why that
    doesn’t help
    Front-end devs unfamiliar with Java
    Verbose language, complex setup
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

33. Functional Testing
    Front-end Friendly Solutions
    webdriver.io: Next-gen WebDriver test framework
    cypress.io: Dependency-free testing
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

34. learn.webdriver.io
    

    View Slide

35. Unit Testing
    Why it’s needed Catch bugs during development
    Traditional
    Approach
    Standard unit tests, red/green testing
    Why that
    doesn’t help
    Code built around user interactions;
    not simple input/output
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

36. Unit Testing
    Front-end Friendly Solutions
    Teach difference between Unit and Functional
    Limit use to specific needs
    Jest/Mocha/Jasmine
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

37. Accessibility Testing
    Why it’s needed Legal, moral reasons
    Traditional
    Approach
    Run a “validator”
    Outsource
    Ignore :(
    Why that
    doesn’t help
    Can’t catch all errors
    Overemphasizes “compliance”

    Often too late
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

38. Accessibility Testing
    Front-end Friendly Solutions
    Honest automated tools: aXe Accessibility Engine
    Training & Hands-on Manual Testing: air-rallies.org
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

39. Making it happen
    

    View Slide

40. Steps to a
    Successful
    Discipline
    - Put together a plan
    - Establish communication
    - Revisit and revise
    - Bonus: Create a test dashboard
    

    View Slide

41. Planning ahead
    Start small
    Understand team motivations
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

42. Planning ahead
    Build vertically, then
    horizontally
    Visibility matters
    Slides: https://bit.ly/2wyaLAW
    }
    {
    UI TESTS
    UI TESTS
    UI TESTS
    BUILD SYSTEM
    CODE REPO
    TEST RUNNER
    TEST SERVER
    TEST REPORTER
    BUILD TRIGGER
    Focus on
    all of this
    Not just
    this
    BROWSERS
    

    View Slide

43. Establishing Communication
    Review upcoming work, timeline of changes
    What to focus on versus ignore
    Share your task list, especially around automation
    Talk on a regular basis
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

44. Revisiting & Revising
    Assess impact of automation
    Where has it helped?
    What pains are impacting usefulness?
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

45. Revisiting & Revising
    Re-evaluate value provided
    Have company/team priorities shifted?
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

46. Building a Testing Dashboard
    Will link to:
    Bug/issue tracking, taskboard
    Automated test results
    Static pages & documentation
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

47. Building a Testing Dashboard
    Lean on devs for help building & organizing
    keen.github.io/dashboards
    redash.io
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

48. Tips for Teaming Up
    

    View Slide

49. Don’t be late to the party
    Help define testing goals
    What does a performant site look like?
    How will accessibility be tested?
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

50. Don’t be late to the party
    Raise awareness on how you can help
    “I can set up some devices for testing”
    “Have you considered using X tool?”
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

51. Be explicit with bug reports
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

52. Be explicit with bug reports
    

    View Slide

53. Compromise
    Tools/validators are not the law
    There will always be bugs
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

54. Question how it works
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

55. Teach how to test
    “Hey, let me show you something”
    “I put this together, mind giving it a shot?”
    Offer Lunch and Learns
    Slides: https://bit.ly/2wyaLAW
    

    View Slide

56. Learn a little programming
    

    View Slide

57. learn.webdriver.io
    use code applitools2018 for 20% off
    

    View Slide

58. Thank you!
    Email! me@klamp.in
    Slides: bit.ly/2wyaLAW
    Links: bit.ly/2N7a4Ic
    Free videos: videos.klamp.in
    My Course: learn.webdriver.io
    use code applitools2018 for 20% off
    

    View Slide