Visual Regression

Visual Regression Testing Without Browser Infrastructure

Get the baseline and candidate screenshots from a managed browser fleet — keep your CI fast and your pipeline free of Chrome installs.

Visual regression testing lives or dies on capture stability. Self-hosted browsers in CI introduce the flakiness you're trying to detect: font availability differs per runner, browser versions drift, and parallel jobs fight for memory.

Capturing through an API gives every branch and every run the identical rendering environment. Your CI job sends URLs (or preview-deploy URLs), gets PNGs back, and runs the diff — no playwright install step, no browser cache, no runner snowflakes.

CI step: capture preview deploy

// e.g. GitHub Action step against a Vercel/Netlify preview URL
const pages = ["/", "/pricing", "/docs"];

const shots = await Promise.all(
  pages.map((path) =>
    fetch("https://api.screenshotty.link/api/v1/screenshot", {
      method: "POST",
      headers: {
        "X-Api-Key": process.env.SCREENSHOTTY_API_KEY,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: `${process.env.PREVIEW_URL}${path}`,
        viewport_width: 1280,
        viewport_height: 800,
        ready_event: "networkidle",
        adblock: true,
      }),
    }).then((r) => r.arrayBuffer())
  )
);
// → diff against baselines with pixelmatch/odiff

Everything You Need, Built In

Identical environment per run

Same Chrome, same fonts, same flags for baseline and candidate — diffs show your changes only.

Deterministic timing

ready_event, wait_ms, and scroll_to_bottom pin down lazy content before capture.

Element-level baselines

Capture individual components with CSS selectors for tighter, less noisy diffs.

Parallel-friendly

Capture a whole page matrix concurrently; webhooks deliver results without blocking CI.

Frequently Asked Questions

How do I avoid flaky diffs from animations and carousels?

Inject css_code to disable animations (e.g. *, *::before, *::after { animation: none !important; transition: none !important; }) and pin dynamic content with javascript_code where needed.

Does this replace Playwright component tests?

No — it complements them. Keep interaction tests in your test runner; use API captures for the page-level visual layer where browser-infrastructure flakiness hurts most.

Is there a free tier to try this?

Yes. 100 screenshots per month free, no credit card required. Paid plans start at $9/month for 2,500 screenshots with $0.004 pay-as-you-go overage.

Can I test responsive breakpoints?

Yes — capture the same URL at multiple viewport sizes (or device presets) in parallel and diff each against its own baseline.

Start Capturing in Minutes

100 free screenshots per month. No credit card required.

// e.g. GitHub Action step against a Vercel/Netlify preview URL

const pages = ["/", "/pricing", "/docs"];

const shots = await Promise.all(

pages.map((path) =>

fetch("https://api.screenshotty.link/api/v1/screenshot", {

method: "POST",

headers: {

"X-Api-Key": process.env.SCREENSHOTTY_API_KEY,

"Content-Type": "application/json",

body: JSON.stringify({

url: `${process.env.PREVIEW_URL}${path}`,

viewport_width: 1280,

viewport_height: 800,

ready_event: "networkidle",

adblock: true,

}),

}).then((r) => r.arrayBuffer())

)

);

// → diff against baselines with pixelmatch/odiff