Visual regression (screenshot comparison)

5 min read

A classic HTTP monitor will say "the server responds 200", but it does not know that the main CSS file failed to load and the site is rendering broken. Visual regression takes a screenshot and compares it with a baseline - it detects visual changes even when the server says OK.

How it works

1. The first time you enable visual regression, a baseline screenshot (reference) is taken.
2. For every subsequent check a new screenshot is taken and compared pixel-by-pixel with the baseline.
3. If the difference exceeds the threshold (default 5%), the monitor is marked as changed and you get an alert.
4. In the monitor detail you see the baseline and the current screenshot side by side + diff overlay.

When to use it

• After deploys - automatically detects broken fonts, CSS, layout
• For marketing landing pages - so you know the GA tag has not lost its position
• For e-shops - to check that the "Add to cart" button is still visible
• For status pages - so you know that your own status page renders

Setup

1. In the monitor detail, go to the Visual regression tab
2. Click Enable - a baseline is taken (10-30 seconds)
3. Optionally set the threshold (1-20%, default 5%)
4. After a deploy, refresh the baseline via Refresh baseline

Watch out for false positives

• Date / time on the page - every check renders them differently. Either ignore, or set a CSS selector mask.
• Ads / banners - rotate between requests. Mask the domain of the ad provider.
• Animations - first frame vs. next. Visual regression waits 2 s after load for the animation to settle.
• Cookie banner - always auto-accepted, but sometimes remains visible. Add a CSS rule via user-config.