Catching pixel level changes
Functional tests confirm behavior but miss visual breakage like a shifted layout or wrong color. Visual regression testing renders a component, captures a screenshot, and compares it against a stored baseline.
How it flows
- Render the UI in a consistent environment.
- Capture an image and diff it pixel by pixel against the baseline.
- Flag any change above a tolerance threshold for human review.
Taming false positives
- Pin the environment fixed fonts, viewport, and browser version reduce noise.
- Disable animation freeze time so frames are stable.
- Mask dynamic regions ignore timestamps or random avatars.
- Use a small threshold to tolerate harmless anti aliasing differences.
When a change is intentional, you approve the new image as the baseline.
Key idea
Visual regression diffs screenshots against a baseline to catch UI changes that behavior tests cannot see.