A percentage does not provide location
Knowing that 3.8% of a page changed cannot tell a reviewer whether the difference is a price, a broken hero, a footer badge or an irrelevant recommendation tile.
Screenshot evidence with region-level heatmaps
Find the pixels that changed before customers do.
Capture a rendered page, separate meaningful movement from rendering noise, and review every hotspot through a heatmap, raw screenshot, side-by-side comparison or draggable slider.
- Evidence
- Screenshots + regions
- Review
- 4 comparison modes
- Decision
- Approve or reject
Sample visual evidence
acme.com/pricing · desktop capture
HeatmapRawSide by side
Minor High
current capture + overlay
REGION 01
26.8% · high intensity
REGION 02
8.1% · minor intensity
The pricing card and header action changed; ignored chat controls were excluded.
A changed screenshot hash still leaves the investigation to you.
Useful visual evidence has to identify the affected area, preserve the surrounding page and explain when the whole viewport changed instead of painting every difference with the same urgency.
Browser rendering produces harmless variance
Anti-aliased edges, caret positions, animated widgets and delayed third-party content can move pixels without representing a customer-impacting regression.
Page-wide repaints need different treatment
A breakpoint change or failed stylesheet can affect most of the capture. Presenting hundreds of tiny hotspots would imply false precision when the useful verdict is page-wide movement.
The screenshot becomes inspectable evidence.
Region data stays attached to the change record so the same visual explanation works in the dashboard, history filters, public shares and scheduled reports.
Intensity heatmaps
Changed pixels are flattened over the current page with amber for minor movement and red for stronger perceptual differences.
Region-level hotspots
Adjacent changes are grouped into reading-order regions with coordinates, changed-pixel coverage and a bounded intensity score.
Four review modes
Move between heatmap, raw screenshot, side-by-side and keyboard-operable slider views without leaving the change evidence.
Visual ignore areas
Mask known volatile rectangles before comparison so a cookie prompt, chat control or rotating campaign does not dominate the result.
Area-filtered history
Draw a region on the baseline or use header, content and footer presets to find historical changes that overlap the same page area.
Accessible review
Every hotspot is keyboard focusable and exposes its regional percentage, intensity and classification through screen-reader text.
From rendered page to regression decision.
Capture, comparison and approval remain separate stages so a noisy browser does not turn directly into an urgent notification.
- 01
Render the monitored page
Open the URL in a browser capture, apply the selected element target and preserve the screenshot as the new candidate state.
- 02
Compare perceptually
Measure YIQ color distance, skip anti-aliasing noise and exclude every configured visual ignore region.
- 03
Build review regions
Group nearby changed pixels, calculate intensity and retain a bounded set of hotspots in screenshot reading order.
- 04
Review and resolve
Inspect the heatmap and underlying screenshots, then approve the intended baseline or reject the regression with its evidence intact.
Visual evidence shows appearance, not business meaning by itself.
A screenshot is strongest when paired with the source-level evidence that explains why the pixels moved and with a stable capture configuration.
- Use an HTML or API monitor alongside the visual monitor when the exact changed value or field matters more than its appearance.
- Keep the viewport, locale and authentication state stable. A responsive breakpoint or personalized page can create a legitimate but very broad visual change.
- Mask only areas that are truly irrelevant. A large ignore region can hide the same customer-visible regression you intended to detect.
- Older changes without detailed region rows remain reviewable through an explicit approximate full-frame fallback rather than fabricated precision.
Continue with the related workflow.
HTML change detectionIdentify the text, section or metadata edit behind a visible movement.AI-assisted change reviewAdd a bounded summary and severity while keeping the screenshots as source evidence.Visual difference guideUnderstand perceptual comparison, anti-aliasing and practical screenshot thresholds.
Questions about visual regression monitoring
Before you add the first monitor
- What does visual regression monitoring detect?
- A visual monitor captures the rendered page and compares it with the previous successful screenshot. It can surface changed pixels caused by layout, typography, color, images, overlays or responsive behavior even when the visible text has not changed.
- How does the heatmap show where a page changed?
- OnChange groups nearby changed pixels into bounded regions, records their coordinates and intensity, and flattens amber and red evidence onto the current screenshot. Reviewers can focus each region to read its percentage and classification, or switch to raw, side-by-side and slider views.
- Can I ignore cookie banners or animated page areas?
- Yes. Visual ignore regions are removed before the pixel comparison runs, so a masked chat widget, rotating banner or other known dynamic area does not create a heatmap hotspot. The ignored area remains visible in the evidence as an intentional exclusion.
- Does OnChange replace dedicated browser testing?
- No. Visual monitoring is a production observation and review workflow, not a replacement for deterministic component and end-to-end tests in your delivery pipeline. It is most useful for detecting unexpected changes on real public pages after deployment or third-party content updates.
Put one customer-critical screen under visual review.
Visual monitoring is available on Pro and above. Start with a pricing, checkout, sign-up or policy page where appearance carries real consequence.