Visual regression testing
Compares screenshots of rendered pages or components with approved baselines and reports pixel differences.
Sub-techniques
2
| ID | Name | Description |
|---|---|---|
V1025.001 | Component snapshots | Screenshot each component state in isolation. |
V1025.002 | Page snapshots | Screenshot full pages at fixed viewports. |
Craft it
- Render in a pinned browser and font environment to avoid noise.
- Store baselines per branch and approve changes in the PR.
- Set per-component diff thresholds rather than one global value.
Reverse engineer it
Signs that a codebase already runs this technique, and where to read how it is configured.
- __screenshots__ or backstop_data directories.
- toHaveScreenshot assertions or a visual testing step in CI.
Open-source packages
5
- pixelmatch mapbox/pixelmatch
- BackstopJS garris/BackstopJS
- Lost Pixel lost-pixel/lost-pixel
- reg-suit reg-viz/reg-suit
- Playwright microsoft/playwright