Visual Regression Monitoring: Detect Website Changes With Automated Screenshots

Your website could change right now and you would not know. A failed deployment renders your homepage blank. A CMS update breaks the layout. An attacker defaces your landing page. Traditional HTTP monitoring only checks if the server responds — it cannot tell you what the page actually looks like. That is where screenshot monitoring comes in.

How Screenshot Monitoring Works

Monitorion's screenshot monitor uses a real Chrome browser (Puppeteer) to load your page, wait for JavaScript to render, and capture a full-page screenshot. It then compares the screenshot against a stored baseline using hash comparison and size analysis to detect visual changes.

When a change is detected that exceeds your configured threshold, Monitorion creates an incident and sends you an alert with the percentage of estimated visual change. You can view the before and after screenshots in the gallery on the monitor detail page.

Setting Up Screenshot Monitoring

Go to Monitors → New Monitor → Screenshot and configure:

• URL — the page to capture
• Change Threshold (1-50%) — how much visual change triggers an alert. Start with 10% to avoid noise from minor dynamic content.
• Viewport — Desktop (1280x720), Tablet (768x1024), or Mobile (375x667). Choose based on your audience.
• CSS Selector (optional) — monitor a specific element instead of the full page. Great for capturing only your hero section or pricing table.
• Full Page — capture the entire scrollable page or just the visible viewport.
• Check Interval — every 4 hours, 6 hours, 12 hours, or daily.

Use Cases

Deployment verification. After deploying, the next screenshot check confirms your site still looks right. No more "it works on my machine" — you have proof from a real browser in a real data center.

Defacement detection. If an attacker modifies your homepage, the screenshot monitor catches it within hours. Combined with email and SMS alerts, you know immediately.

Content compliance. For regulated industries, screenshot monitoring creates an audit trail of how your website looked at specific points in time.

Third-party widget monitoring. Track if embedded widgets (chat, analytics, payment forms) disappear or break visually.

Tips for Reducing False Positives

• Use CSS selectors to exclude dynamic areas (ads, timestamps, live feeds)
• Set the threshold to 10-15% — minor dynamic content causes 1-5% change
• Use a specific viewport size — responsive layout shifts cause hash differences
• Avoid pages with animations — each frame produces a different screenshot

Screenshot monitoring runs on VPS workers with Chrome installed. It is available on Pro plans and above. Start monitoring your site visually — set up your first screenshot monitor in under a minute.