Automating Design Review with Visual Regression

A pixel here, a mis-eyedropped color there or worst of all having to spin up your IE11 VM to do a design review process. This talk covers how to utilise visual regression (screenshot diffing) tools to offload these pains and move this to just another pull request step.

Transcript

1. AUTOMATING DESIGN REVIEW WITH VISUAL REGRESSION !
2. WHO ARE YOU? CALLUM SILCOCK FRONT END DEVELOPER @ WEBANYTIME HOPIN.TO HTTPS://CSI.LK || GITHUB.COM/CSI-LK
3. ! "dartah" = data "rehpo" = repo
4. WHAT ARE WE TRYING TO SOLVE? - CSS Sucks [insert family guy blinds gif here] - Manual regression sucks - UAT sucks
5. .─. .─. .─. ( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( ) ┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐ │Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │──┬─>│QA │ │ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │ │ └───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ │ └───┘ ▲ ├>Tests Pass │ .─. │ └>Approval │ ( ) │ │ ┌`─'┐ │ │ │Des│ │ └─>│ign│ │ Fails Something └─┬─┘ └────────────────────────────────────────────────────────┘
6. SO WHAT IS VISUAL REGRESSION TESTING? - Screenshot diffing - Gold (master) vs new (feature branch) - Expose unintended changes - Give us a review process for the visual
7. Λ ╱ ╲ ╱ ╲ ╱ E2E ╲ ╱───────╲ ╱ ╲ ╱ ╲ ╱ Integration ╲ %%& We are here ╱───────────────╲ ╱ ╲ ╱ ╲ ╱ Unit ╲ ╱───────────────────────╲ ╱ ╲ ╱ ╲ ╱ Static ╲ ───────────────────────────────
8. EXAMPLES - Companion Repo - https://github.com/csi-lk/visual-regression-how-to/ - Percy.io (Interface Example) - Ready made examples, easy setup - Supports parallelisation - Happo.io (Interface Example) - Supports all browsers - Founder (Henric) is awesome
9. EXAMPLE - STORYBOOK COMPONENTS - Storybook - HTML Components - Example PR with review step - Pairs well with a design system or component library
10. EXAMPLE - RESPONSIVE WEBSITE - Eg. Jekyll, Gatsby etc. - Build out to HTML files - Breakpoints is where things go wrong - Example PR with review step - Pairs well with full page designs
11. .─. .─. .─. ( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( ) ┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐ │Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │ ──>│QA │ │ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │ └───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ └───┘ ▲ .─. ├>Tests Pass │ ( ) └>Approval Fails Something ┌`─'┐ │ │ │Des│ │ └────────│ign│◀────────────────┘ └───┘
12. PROS - Reduce manual QA time - Include designers in the process - Reduce the feedback loop - Get it right once
13. CONS - Extra step in a PR - Extra tool to manage - Train designers on PR process - Takes time to run
14. THANKS GITHUB.COM/CSI-LK/VISUAL-REGRESSION-HOW-TO ❤ CALLUM SILCOCK