Visual Regression Testing

Charlie Owen@sonniesedge

Visual Regression Testing

Testing things because things getting messy makes me twitchy and people don’t like it when I get twitchy.

Robert K. Merton, American sociologist

“The law of unintended consequences”

Web developer

“Oh fuck, I broke the build”

<p>Hello!</p>

p { font-size: 2em;}

Take initial screenshot

<p>Hello!</p>

p { font-size: 4em;}

Take second screenshot

✓

✕

Image diffing Image 1

What a cheat

Image diffing Image 2

Image diffing Differences in red

.btn-lg { padding-right: 20px;}

compare image1.png image2.png -compose src diff.png

$>

PhantomCSSWraithGrunt-photoboxNeedle

SLIDE REMOVED DUE TO VIDEO SIZE

image of previous diff

Stephen Hay

“We’re not designing pages, we’re designing systems of components.”

Component libraries

Charlie Owen@sonniesedgesonniesedge.co.uk