Catching visual regressions between deploys with two API calls

Catching visual regressions between deploys can be done with just two API calls, as demonstrated by the Screenshot Happy service. The first option involves taking a screenshot of the page from your CI job using a single request. This can be achieved by making a curl request to the screenshot API endpoint, specifying the URL of the page to capture and setting full_page=true to capture the entire scrollable page.

The output can be stored as a PNG, JPEG, or PDF file as a build artifact. The second option is to create a monitor that watches the page for visual changes between deploys. This is accomplished by making a POST request to the monitor API endpoint, providing the URL of the page to monitor, a webhook URL to send notifications to, the frequency in minutes for checks (minimum is 6 hours), and a pixel difference threshold.

If the percentage of changed pixels exceeds the threshold, a POST request is sent to the specified webhook with details of the monitor ID, URL, check time, detected change, and percentage difference. The service retries the delivery up to 3 times if the endpoint does not return a 2xx status code. The threshold for detecting visual changes is a flat percentage of changed pixels across the entire page, which may need to be adjusted for noisy pages with frequent updates like rotating ads or live timestamps.

The service runs checks on a schedule (every 6 hours on the free plan, hourly on paid plans) rather than in real-time after a deploy. Free tier includes 200 screenshots per month and 3 monitored pages, while paid plans offer additional features at €9 (Starter) and €29 (Growth) per month.