Integrating visual testing into the build pipeline
summary
Experiment integrates pixel-compare visual tests into a CI pipeline for a web-based safety-critical UI using protractor-image-comparison backed by Resemble.js, plus custom JS hooks to capture element-specific screenshots and exclude dynamic regions. Tackles pixel shifts, anti-aliasing and scaling by preferring PNG, setting color/pixel thresholds, avoiding JPEG, and favoring headless browser mode for stability. Result is a maintainable test suite that runs in CI, reports actual/diff images, and significantly reduces false positives after threshold tuning.
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:56Context
- 2:22The basic idea
- 2:541. High chance of false positives
- 4:10Anti-aliasing: the stair-stepping of edges
- 4:452. High maintenance effort
- 7:36How to amend the weaknesses?
- 9:03A few tips and trickes...
- 11:10Lessons learned
related talks
42mVisual Testing Powered by CodeceptJS & Resemble.js
45mVisual Regression and Integration Testing on JS
39mSpot the difference: automating visual regression testing
18mImplementing a Visual CSS Testing Framework
32mContinuous Visual Integration for Rails
21mContinuous Monitoring + Continuous Testing in DevOps delivery models
27mVisual UI Testing – Testing the Last Mile
37mSpot the Difference; Automating Visual Regression Testing