IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK

@jessicard

using

AUTOMATICscreenshot

COMPARISONto catch style

REGRESSIONS

@jessicard

Jessica Dillon

(we’re hiring!)

bugsnag.com/blog

IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

does thisEXIST?

Huxley Phantom CSS GhostStory

Cactus Needle

CSSCritic fighting-layout-bugs

sikuli Mogo

Quixote

huxley

“Watches you browse, takes screenshots, tells you when they change”

👎

quixote

👎

Huxley Phantom CSS GhostStory

Cactus Needle

CSSCritic fighting-layout-bugs

sikuli Mogo

Quixote

WHAT DO I WANT?

master feature

master feature

master

master feature

PROCESS

VISIT1.

SCREENSHOT2.

UPLOAD3.

upload master

screenshot

download master

screenshot

upload feature

screenshot

DIFF4.

master feature

master feature

master feature

VIEW5.

BUILDINGour framework

TESTINGwith rspec

rspec

LOCAL speed

CI speed

buildkite

SCREENSHOTwith selenium

selenium

browserstack

DYNAMIC DATA

DIFFINGwith imagemagick

imagemagick

1

2

VS

STORINGwith aws

/#{commit-sha}/#{area-of-site}/#{page-name}/

#{image-type}.png

/a1a1a1a/marketing/

index/diff.png

diff.png current.png master.png

VIEWINGwith the internet

THE FUTURE

MEANINGFUL TEST ASSERTIONS

0% DIFFS

VS

VS

PULL REQUESTS

CURRENT commit on

BRANCH

CURRENT commit on

MASTER

DIFF BETWEEN

master feature

PREVIOUS commit on

MASTER

CURRENT commit on

MASTER

DIFF BETWEEN

master feature

CURRENT commit on

BRANCH

PREVIOUS commit on

BRANCH

DIFF BETWEEN

master feature

thanks!@jessicard

leanpub.com/ just-enough-unix-command-line

@jessicard