Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Kevin Lamping

Other Decks in Technology


  1. 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
  2. I’ve got (even more) problems… Persistant Data Business Logic View

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

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

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

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

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

    Logic UI (interactive) Datastore Slides: https://bit.ly/2wyaLAW
  8. I’ve got (so many) problems… Home About Us Contact Us

    Navigation Form Inputs Buttons Popovers Slides: https://bit.ly/2wyaLAW
  9. Why Front-end Testing? - Wide variety of supported devices -

    Increased reliance on functionality - Performance & usability pay off - High utilization of 3rd-party code
  10. Front-end Testing Wishlist - Plethora of devices to test on

    - Resilient and useful test suites - Consistent test environments - Configurable test data
  11. 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
  12. Device Testing Front-end Friendly Solutions Virtual Devices: Sauce Labs, Browserstack,

    TestingBot Physical devices connected via browsersync.io Slides: https://bit.ly/2wyaLAW
  13. 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
  14. 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
  15. 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
  16. Mock APIs Front-end Friendly Solutions “Black box of data” NockJS,

    fakejson.com, Postman Slides: https://bit.ly/2wyaLAW
  17. 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
  18. Functional Testing Front-end Friendly Solutions webdriver.io: Next-gen WebDriver test framework

    cypress.io: Dependency-free testing Slides: https://bit.ly/2wyaLAW
  19. 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
  20. 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
  21. 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
  22. 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
  23. Steps to a Successful Discipline - Put together a plan

    - Establish communication - Revisit and revise - Bonus: Create a test dashboard
  24. Planning ahead Build vertically, then horizontally Visibility matters Slides: https://bit.ly/2wyaLAW

  25. 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
  26. Revisiting & Revising Assess impact of automation Where has it

    helped? What pains are impacting usefulness? Slides: https://bit.ly/2wyaLAW
  27. Building a Testing Dashboard Will link to: Bug/issue tracking, taskboard

    Automated test results Static pages & documentation Slides: https://bit.ly/2wyaLAW
  28. Building a Testing Dashboard Lean on devs for help building

    & organizing keen.github.io/dashboards redash.io Slides: https://bit.ly/2wyaLAW
  29. 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
  30. 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
  31. 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
  32. 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