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

Automating Design Review with Visual Regression

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.

F27dd959ecd05f9d41ba175c1fba1178?s=128

Callum Silcock

June 09, 2020
Tweet

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