Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

My magical toolbox

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

learn.webdriver.io

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Making it happen

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Tips for Teaming Up

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Be explicit with bug reports

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Learn a little programming

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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