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

6823d6d1ee14bd068007bd60ddb6a41a?s=47 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.

6823d6d1ee14bd068007bd60ddb6a41a?s=128

Kevin Lamping

September 05, 2018
Tweet

Transcript

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

    Engineer & Tester
  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
  3. I’ve got problems… Slides: https://bit.ly/2wyaLAW

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

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

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

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

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

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

    4+ OSes Infinite edge cases
  10. I’ve got (more) problems… Home About Us Contact Us Slides:

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

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

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

  14. I’ve got (even more) problems… Persistant Data Business Logic View

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

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

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

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

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

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

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

    Increased reliance on functionality - Performance & usability pay off - High utilization of 3rd-party code
  22. My magical toolbox

  23. Front-end Testing Wishlist - Plethora of devices to test on

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

    TestingBot Physical devices connected via browsersync.io Slides: https://bit.ly/2wyaLAW
  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
  27. Visual Testing Slides: https://bit.ly/2wyaLAW Front-end Friendly Solutions Automated Screenshot Comparison

    Applitools
  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
  29. Pattern Libraries Front-end Friendly Solutions Online “Living” Style Guides StorybookJS,

    styleguides.io Slides: https://bit.ly/2wyaLAW
  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
  31. Mock APIs Front-end Friendly Solutions “Black box of data” NockJS,

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

    cypress.io: Dependency-free testing Slides: https://bit.ly/2wyaLAW
  34. learn.webdriver.io

  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
  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
  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
  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
  39. Making it happen

  40. Steps to a Successful Discipline - Put together a plan

    - Establish communication - Revisit and revise - Bonus: Create a test dashboard
  41. Planning ahead Start small Understand team motivations Slides: https://bit.ly/2wyaLAW

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

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

    Slides: https://bit.ly/2wyaLAW
  46. Building a Testing Dashboard Will link to: Bug/issue tracking, taskboard

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

    & organizing keen.github.io/dashboards redash.io Slides: https://bit.ly/2wyaLAW
  48. Tips for Teaming Up

  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
  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
  51. Be explicit with bug reports Slides: https://bit.ly/2wyaLAW

  52. Be explicit with bug reports

  53. Compromise Tools/validators are not the law There will always be

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

  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
  56. Learn a little programming

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

  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