Visual Regression Testing: From a Tool to a Process

on YouTube ↗21m

" summary

Converts PhantomCSS into a team process: uses PhantomCSS + CasperJS + PhantomJS + resemble.js to take and diff screenshots, adds a DOM data attribute so the page signals when it is ready, and replaces image src with inline images to remove network waits. Splits tests and uses Enquirer for an interactive CLI, hooks into CI (TeamCity), sends HipChat alerts and publishes a web results dashboard. Runtime drops about 5× from ~600 minutes, stability and coverage remain work in progress.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 1:28Visual Regression Testing
3. 3:55Phantom CSS
4. 6:27How does it work
5. 9:21Improving it
6. 12:47Options
7. 16:31Problems

" related talks

• 18mImplementing a Visual CSS Testing FrameworkJessica Dillon · CSSConf Oakland 2014
• 45mVisual Regression and Integration Testing on JSPavlo Bashinsky · Selenium Camp 2017
• 37mThe Colorful World of Visual Test AutomationOnur Baskirt · Selenium Camp 2017
• 40mVisual regression testing: your strategy's blind spotThomas Boutin · AndroidMakers by droidcon 2026
• 53mPainless visual testingGojko Adzic · NDC London 2018
• 20mVisual testing with Visual Regression TrackerPavel Strunkin · Appium Conference 2021
• 27mVisual UI Testing – Testing the Last MileCraig Cavalier · React Boston 2019
• 49mVisual Regression Testing with BackstopJSDavid Needham · MidCamp 2019