Visual regression monitoring with synthetic pages

A repeatable workflow

1. Choose the public page and record the viewport, locale, color scheme, and safe test state.
2. Capture a baseline only after fonts, images, animations, and consent UI have settled.
3. Capture the same state on a schedule with stable browser preparation.
4. Review the diff and the full before and after screenshots together.
5. Capture again after repair and close the incident only after the rendered page recovers.

Synthetic fixture

The companion fixture contains synthetic content, a stable call to action, and Baseline and Changed controls that alter the badge, action-panel colors and action label. Switch back to Baseline to test recovery.

Open the synthetic visual regression fixture

Run a controlled comparison

1. Open Baseline and record the full URL, capture time, browser and viewport. Use the same environment for each capture.
2. Capture Baseline twice. Investigate unexpected differences before testing an intentional change.
3. Open Changed and capture again. Expect the badge, action-panel colors and action label to differ. The page should still be reachable.
4. Restore Baseline and compare it with the original baseline using the same settings. Review the images, not only a change percentage.
5. Record the result and any excluded regions. A small changed area can contain an important action; a large difference can be an expected redesign.

The controls navigate between two URLs. They demonstrate screenshot comparison, but do not change the content served to an existing monitor at its original URL. To test scheduled detection and alerts, use a test page you control at one stable URL, deliberately change that page, wait for its configured check interval, verify the alert, then restore the page and verify recovery.

What to record for a client

• The tested URL, capture times and selected region.
• Baseline, changed and recovery screenshots with viewport and browser details.
• The response result and visible difference, reported separately.
• The reason a change was accepted or repaired, and any excluded content.
• For an alert test: destination, delivery time and recovery notification result.

Do not use a universal percentage as an incident rule without testing your pages. Rotating banners, timestamps and browser differences can add noise. Excluding a region also removes its coverage, so keep important forms and calls to action in the comparison.

For developer-run screenshot assertions, Playwright’s visual comparison documentation explains reference images and why the browser environment matters. Those testing settings are not a promise that every option is exposed in Visual Sentinel.

Privacy and limits

Do not publish customer URLs, screenshots, cookies, tokens, incident details, or internal runbooks. Synthetic checks observe a configured browser state from enabled regions and do not represent every visitor device or network.

Visual Sentinel combines screenshot evidence with uptime, SSL, DNS, performance, and content signals. Explore visual monitoring for a real site you manage.