Visual regression (screenshot diff)

A classic HTTP monitor tells you "the server responds 200 OK", but it has no idea that the main CSS file failed to load and the site renders broken. Visual regression takes a snapshot of the page and compares it with a baseline snapshot - it catches visual changes even when the server says everything is fine.

Visual regression is available on the Pro and Business plans.

How it works

1. The first time you enable visual regression, a baseline snapshot is taken - the reference that everything is compared against later.
2. On every following check we take a new snapshot and compare it with the baseline pixel by pixel.
3. If the difference exceeds the configured threshold (5% by default), the monitor is marked as changed and you get an alert.
4. In the monitor detail you see the baseline and the current snapshot side by side, with the differing areas highlighted.

When to use it

• After deploying a new version of the site - it automatically catches broken fonts, CSS or layout
• For marketing landing pages - so you know the GA tag and other elements have not moved out of position
• For e-shops - checking that the "Add to cart" button is still visible
• For status pages - so you know that your own status page renders correctly

Setup

1. When creating a monitor, select the type Visual regression - the first snapshot is automatically saved as the baseline
2. In the monitor detail, in the Visual regression section, you see the reference snapshot, the current snapshot and the highlighted differences
3. Set the change limit with the Visual change limit slider (0.5 to 30%, 5% by default)
4. After every deployment of a new version, update the baseline with the Set current as reference button

Watch out for false alarms

• Date and time on the page - every check renders them differently. After deploying such a change, always refresh the baseline.
• Ads and banners - they rotate between snapshots and often trigger a false alarm. Visual regression works best on pages without ads.
• Animations - the first and next snapshot may differ. Visual regression waits 1.5 seconds after loading so the animation settles.