IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
@jessicard
using
AUTOMATICscreenshot
COMPARISONto catch style
REGRESSIONS
@jessicard
Jessica Dillon
IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭
Huxley Phantom CSS GhostStory
Cactus Needle
CSSCritic fighting-layout-bugs
sikuli Mogo
Quixote
“Watches you browse, takes screenshots, tells you when they change”
Huxley Phantom CSS GhostStory
Cactus Needle
CSSCritic fighting-layout-bugs
sikuli Mogo
Quixote
upload master
screenshot
download master
screenshot
upload feature
screenshot
BUILDINGour framework
TESTINGwith rspec
SCREENSHOTwith selenium
DIFFINGwith imagemagick
/#{commit-sha}/#{area-of-site}/#{page-name}/
#{image-type}.png
/a1a1a1a/marketing/
index/diff.png
diff.png current.png master.png
VIEWINGwith the internet
MEANINGFUL TEST ASSERTIONS
CURRENT commit on
BRANCH
CURRENT commit on
MASTER
DIFF BETWEEN
PREVIOUS commit on
MASTER
CURRENT commit on
MASTER
DIFF BETWEEN
CURRENT commit on
BRANCH
PREVIOUS commit on
BRANCH
DIFF BETWEEN
thanks!@jessicard
leanpub.com/ just-enough-unix-command-line
@jessicard