Slide 1
Slide 1 text
AUTOMATING DESIGN REVIEW
WITH
VISUAL REGRESSION
!
Slide 2
Slide 2 text
WHO ARE YOU?
CALLUM SILCOCK
FRONT END DEVELOPER @ WEBANYTIME HOPIN.TO
HTTPS://CSI.LK || GITHUB.COM/CSI-LK
Slide 3
Slide 3 text
!
"dartah" = data
"rehpo" = repo
Slide 4
Slide 4 text
WHAT ARE WE TRYING TO SOLVE?
- CSS Sucks [insert family guy blinds gif here]
- Manual regression sucks
- UAT sucks
Slide 5
Slide 5 text
.─. .─. .─.
( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( )
┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐
│Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │──┬─>│QA │
│ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │ │
└───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ │ └───┘
▲ ├>Tests Pass │ .─.
│ └>Approval │ ( )
│ │ ┌`─'┐
│ │ │Des│
│ └─>│ign│
│ Fails Something └─┬─┘
└────────────────────────────────────────────────────────┘
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Λ
╱ ╲
╱ ╲
╱ E2E ╲
╱───────╲
╱ ╲
╱ ╲
╱ Integration ╲ %%& We are here
╱───────────────╲
╱ ╲
╱ ╲
╱ Unit ╲
╱───────────────────────╲
╱ ╲
╱ ╲
╱ Static ╲
───────────────────────────────
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
EXAMPLE - STORYBOOK COMPONENTS
- Storybook
- HTML Components
- Example PR with review step
- Pairs well with a design system or component library
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
.─. .─. .─.
( ) ┌────────┬─┐ ( ) ┌──────────┐ ┌────────┐ ┌────────┐ ( )
┌`─'┐ │ Ticket└─┤ ┌`─'┐ │ │ │ │ Merge │ QA │ ┌`─'┐
│Des│───>│ Story │───>│Dev│──>│ Branch │──>│ PR │────────>│ STG │ ──>│QA │
│ign│ │ │ │ │ │ │ │ │ │ UAT │ │ │
└───┘ └──────────┘ └───┘ └──────────┘ └┬───────┘ └────────┘ └───┘
▲ .─. ├>Tests Pass
│ ( ) └>Approval
Fails Something ┌`─'┐ │
│ │Des│ │
└────────│ign│◀────────────────┘
└───┘
Slide 12
Slide 12 text
PROS
- Reduce manual QA time
- Include designers in the process
- Reduce the feedback loop
- Get it right once
Slide 13
Slide 13 text
CONS
- Extra step in a PR
- Extra tool to manage
- Train designers on PR process
- Takes time to run
Slide 14
Slide 14 text
THANKS
GITHUB.COM/CSI-LK/VISUAL-REGRESSION-HOW-TO ❤
CALLUM SILCOCK