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
   !
   

   View Slide

2. WHO ARE YOU?
   CALLUM SILCOCK
   FRONT END DEVELOPER @ WEBANYTIME HOPIN.TO
   HTTPS://CSI.LK || GITHUB.COM/CSI-LK
   

   View Slide

3. !
   "dartah" = data
   "rehpo" = repo
   

   View Slide

4. WHAT ARE WE TRYING TO SOLVE?
   - CSS Sucks [insert family guy blinds gif here]
   - Manual regression sucks
   - UAT sucks
   

   View Slide

5. .─. .─. .─.
   ( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( )
   ┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐
   │Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │──┬─>│QA │
   │ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │ │
   └───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ │ └───┘
   ▲ ├>Tests Pass │ .─.
   │ └>Approval │ ( )
   │ │ ┌`─'┐
   │ │ │Des│
   │ └─>│ign│
   │ Fails Something └─┬─┘
   └────────────────────────────────────────────────────────┘
   

   View Slide

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
   

   View Slide

7. Λ
   ╱ ╲
   ╱ ╲
   ╱ E2E ╲
   ╱───────╲
   ╱ ╲
   ╱ ╲
   ╱ Integration ╲ %%& We are here
   ╱───────────────╲
   ╱ ╲
   ╱ ╲
   ╱ Unit ╲
   ╱───────────────────────╲
   ╱ ╲
   ╱ ╲
   ╱ Static ╲
   ───────────────────────────────
   

   View Slide

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
   

   View Slide

9. EXAMPLE - STORYBOOK COMPONENTS
   - Storybook
   - HTML Components
   - Example PR with review step
   - Pairs well with a design system or component library
   

   View Slide

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
    

    View Slide

11. .─. .─. .─.
    ( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( )
    ┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐
    │Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │ ──>│QA │
    │ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │
    └───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ └───┘
    ▲ .─. ├>Tests Pass
    │ ( ) └>Approval
    Fails Something ┌`─'┐ │
    │ │Des│ │
    └────────│ign│◀────────────────┘
    └───┘
    

    View Slide

12. PROS
    - Reduce manual QA time
    - Include designers in the process
    - Reduce the feedback loop
    - Get it right once
    

    View Slide

13. CONS
    - Extra step in a PR
    - Extra tool to manage
    - Train designers on PR process
    - Takes time to run
    

    View Slide

14. THANKS
    GITHUB.COM/CSI-LK/VISUAL-REGRESSION-HOW-TO ❤
    CALLUM SILCOCK
    

    View Slide