How to Spot a 1px Bug
summary
Covers visual (screenshot) testing for frontend UI: explains benefits and limitations of screenshot-based tests, how to integrate them into CI pipelines, and shares practical experience of implementing screenshot testing at Wix. Specifically targets finding tiny visual regressions (even 1px) and discusses workflow and tooling to make these tests effective.
AI-written summary · about
chapters (31)
- 0:00Screenshot testing intro
- 1:05Manual visual flaws
- 3:14Snapshot vs screenshot
- 4:17How screenshot tests work
- 6:24Screenshot testing tools
- 8:54Testing frameworks example
- 10:40Stable test data
- 11:22Screenshot tolerance
- 12:25Content management
- 13:50Mocking data for screenshots
- 16:40Production screenshots
- 18:27Testing on devices
- 20:15Speeding up tests
- 22:06Combining functional and visual
- 23:53Debugging with screenshots
- 24:38CSS coverage analysis
- 25:21Cross-platform issues
- 27:32Fixing test environment
- 29:19Selenium Grid and cloud
- 32:30CI/CD integration
- 34:17Optimizing PR tests
- 34:37Screenshot testing limits
- 35:39Animation testing issues
- 37:03Video and GIF testing
- 37:49Drag and drop limits
- 38:51Best practices
- 41:00Apple layout diff
- 42:45Ignoring dynamic regions
- 44:31Testing hidden elements
- 47:00Q&A
- 56:08Legacy browser support
related talks
27mVisual UI Testing – Testing the Last Mile
21mLet's get visual - Visual testing in your Vue application
43mMobile: Test Every Pixel - Screenshots in UI Tests (...)
40mVisual regression testing: your strategy's blind spot
39mSpot the difference: automating visual regression testing
30mImplementing a Visual CSS Testing Framework
18mImplementing a Visual CSS Testing Framework
19mTesting Beyond Unit