CI for CSS: Creating a Visual Regression Testing Workflow

Small, unexpected front-end changes are tough to spot manually and can be a signal for larger problems. Rapid development cycles, large page counts and developer fatigue can make it difficult to catch even visually obvious mistakes before they go live.

Enter automated perceptual diffing:  the process of capturing, tracking, and analyzing screenshots to catch unexpected changes as they happen. Hooked into build and notification tools they become incredibly useful for checking in-development websites, email templates, and (with care) adding an extra layer of monitoring to live sites.

This session will discuss setting up a bare bones workflow and taking it further with headless and full-browser testing. Learn how to automate visual diffing and never push an unexpected css change to production again!