Spot the Difference; Automating Visual Regression Testing
summary
Visual testing catches layout, color and placement regressions that Selenium DOM checks miss and a custom visual test framework on GitHub hooks into existing pipelines. It runs with Selenium + ChromeDriver, compares screenshots to base images and reports pixel diffs — one demo comparison completes in 4 seconds per comparison and a Where’s‑Waldo pair runs in 293 ms. Tradeoffs: need base images per browser, anti‑aliasing and responsive variants, and dynamic content; mitigations include Dockerizing runners, blanking dynamic regions, and converting PDFs to images.
AI-written summary · about
chapters (11)
- 0:00Visual regression testing intro
- 1:03Manual UI testing limits
- 3:09Inverted testing pyramid
- 7:01Optimizing testing pyramid
- 9:54Automate visual regression
- 15:57Choosing UI testing tools
- 23:07Live demo: visual differences
- 25:16What is visual regression
- 28:26Replace text with visual tests
- 31:42Visual tests with SpecFlow
- 36:17Q&A
related talks
39mSpot the difference: automating visual regression testing
37mThe Colorful World of Visual Test Automation
20mVisual testing with Visual Regression Tracker
12mAutomation of GUI testing using visual regression testing
18mImplementing a Visual CSS Testing Framework
54mVisual Validation
42mHow Visual AI Makes Testing Easy
43mYour Tests Lack Vision: Adding Eyes to Your Automation Framework