Explore the implementation of a visual CSS testing framework in this conference talk from CSSConf Oakland 2014. Learn about automatic screenshot comparison techniques to catch style regressions, and discover various tools like Huxley, PhantomCSS, and CSSCritic. Dive into the process of building a custom framework, including testing with RSpec, capturing screenshots with Selenium, handling dynamic data, and diffing with ImageMagick. Gain insights on using Amazon Web Services for storage and organization of test results. Understand the future potential of visual CSS testing, including meaningful test assertions, diff comparisons between commits, and branch-specific testing.
Overview
Syllabus
Intro
using AUTOMATIC screenshot COMPARISON to catch style REGRESSIONS
IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
Huxley Phantom CSS Ghost Story Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote
WHAT DO I WANT?
PROCESS
VISIT
UPLOAD
BUILDING our framework
TESTING with rspec
SCREENSHOT with selenium
DYNAMIC DATA
DIFFING with imagemagick
amazon web services
#{commit-sha}/ #{area-of-site}/ #{page-name} / #{image-type} .png
lalalalal marketing/ index/ diff.png
VIEWING with the internet
THE FUTURE
MEANINGFUL TEST ASSERTIONS
0% DIFFS
CURRENT commit on MASTER
DIFF BETWEEN PREVIOUS commit on MASTER
DIFF BETWEEN CURRENT commit on BRANCH
Taught by
JSConf
