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

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

Kevin Lamping
September 05, 2018

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.

Kevin Lamping

September 05, 2018
Tweet

More Decks by Kevin Lamping

Other Decks in Technology

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! [email protected]
    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