patterntypescriptTip
Visual regression testing with Chromatic: catch unintended UI changes in CI
Viewed 0 times
chromaticvisual regressionstorybooksnapshotpixel diffcss regression
Problem
CSS changes intended for one component silently break the layout of another. Manual visual review in PRs is slow and unreliable. Screenshot diffing tools generate too many false positives from anti-aliasing and font rendering differences.
Solution
Connect Storybook to Chromatic. Chromatic renders each story in a cloud browser and pixel-compares it to the baseline snapshot stored from the last accepted build. Unaccepted visual diffs block the PR. Developers review and accept or reject diffs in the Chromatic UI. Accepted diffs become the new baseline.
Why
Chromatic uses a consistent cloud rendering environment, eliminating cross-machine pixel noise. The diff review workflow puts visual approval into the PR process alongside code review. Baselines are tied to git branches, so feature branches can diverge without polluting main.
Gotchas
- Stories must be deterministic — dynamic dates, random IDs, and animations must be frozen or disabled
- Chromatic charges per snapshot; audit story count and use --only-changed to limit scope in CI
- Storybook interactions (play functions) are not re-run in Chromatic by default; enable with the interactions addon
- Ignore regions can whitelist areas with acceptable dynamic content (e.g., ads, live timestamps)
Revisions (0)
No revisions yet.