Visual Regression Testing with a Screenshot API

How Visual Regression Testing Works with GrabShot

Add screenshot capture to your test suite. Before each release, GrabShot captures your key pages. Compare them against baseline images using your preferred diff tool (pixelmatch, resemble.js, or our sister product DiffShot). Any visual change gets flagged for review.

// In your CI pipeline (GitHub Actions, GitLab CI, etc.)
const pages = ['/home', '/pricing', '/docs', '/login'];

for (const page of pages) {
  const res = await fetch('https://grabshot.dev/api/screenshot', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.GRABSHOT_KEY
    },
    body: JSON.stringify({
      url: `https://staging.yourapp.com${page}`,
      width: 1440,
      fullPage: true,
      format: 'png'
    })
  });
  
  // Save and compare against baseline
  const buffer = Buffer.from(await res.arrayBuffer());
  fs.writeFileSync(`screenshots/current${page.replace('/', '-')}.png`, buffer);
}

Why Use an API Instead of Local Puppeteer?

• No Chrome in CI — skip installing Chromium in your Docker image (saves 400MB+ and minutes of build time)
• Consistent rendering — same browser version every time, no "works on my machine" visual differences
• Parallel captures — screenshot 50 pages simultaneously, finish in seconds instead of minutes
• No memory issues — Puppeteer in CI often OOMs on large pages. Not your problem with GrabShot.
• Cross-platform — works the same on Linux, macOS, and Windows CI runners

Combine with DiffShot

GrabShot captures screenshots. DiffShot compares them. Together they form a complete visual regression testing pipeline — all API-based, no local dependencies.