Unit Testing with Screenshots: Breaking the Sound Barrier
summary
An in-house screenshot testing pipeline that captures component HTML and inline CSS using Jest with a Babel transform, freezes animations and converts GIFs to static frames, and renders pages with Puppeteer headless Chrome via a microservice renderer. Image comparison uses a fast binary fallback (Buffer.compare/hash) then a custom fast PNG decode and pixel diff to reduce full-run time to ~12–15s for ~300 screenshots (tunable to ~4s), with golden images stored in the repo using git-lfs.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 2:18Screenshot testing
- 3:41Problems with tools
- 5:04Static markup generation
- 6:49CSS and dependencies
- 9:42Replacing CSS resources
- 12:35Disabling animations
- 15:24Animated GIFs
- 17:32Parallel test issues
- 19:40Final markup assembly
- 20:42Headless browser screenshots
- 22:27Cross-platform problems
- 23:10Microservice for screenshots
- 27:06Jest screenshot comparison
- 29:16Jest-snapshot issues
- 31:47Image comparison optimization
- 34:57Faster comparison via hashing
- 37:44Pixel-by-pixel diff
- 40:11DIV-image generation
- 42:58Visualizing differences
- 45:25Expand mode analysis
- 46:09Optimizing screenshots
- 47:34Storing code in PNG
- 49:02Git binary issues
- 51:10Git LFS for images
- 52:55Test runtime optimization
- 54:40Caching for speed
- 55:44Open sourcing
- 56:05Summary
related talks
29mHow to set up a pipeline with visual unit tests for your app
27mVisual UI Testing – Testing the Last Mile
18mImplementing a Visual CSS Testing Framework
30mTesting presentation components visually
35mBuilding a screenshot testing pipeline that scales
23mScreenshot testing with ViteShot
34mEnd to end testing a world of web, mobile & desktop apps
45mTesting the web without testers — success or failure