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
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