Design conformance
Compares the rendered UI with the design it implements and reports layout, spacing, colour and copy differences.
Sub-techniques
2
| ID | Name | Description |
|---|---|---|
V1055.001 | Design-to-render comparison | Diff a screenshot against the exported design frame. |
V1055.002 | Annotated screenshots | Mark the differing regions so the fix is obvious. |
Craft it
- Export frames at the same viewport the test renders.
- Compare with a tolerance and mask dynamic content.
- Annotate differing regions on the screenshot.
Reverse engineer it
Signs that a codebase already runs this technique, and where to read how it is configured.
- Design links in tickets or PRs, and exported frames in the repository.
Open-source packages
4
- pixelmatch mapbox/pixelmatch
- OpenCV opencv/opencv
- Pillow python-pillow/Pillow
- Playwright microsoft/playwright