Visual Regression Testing
Without the Setup

Why screenshot-based visual testing breaks in CI

The tooling works locally. Production is a different story.

How it works with SnapAPI

SnapAPI provides consistent, reproducible screenshots from the same infrastructure every time.

CI/CD workflow example

The core pattern — swap in any diff library.

// visual-regression.js — run before/after deploys in CI
// npm install snapapi-sdk pixelmatch pngjs
const snap      = require('snapapi-sdk');
const pixelmatch = require('pixelmatch');
const { PNG }    = require('pngjs');
const fs         = require('fs');

const api = new snap.SnapAPI(process.env.SNAPAPI_KEY);
const PAGES = ['https://myapp.com', 'https://myapp.com/pricing'];

async function captureBaseline() {
  for (const url of PAGES) {
    const slug = new URL(url).pathname.replace(/\//g, '-') || 'home';
    const buf = await api.screenshot({ url, width: 1280, height: 800, format: 'png' });
    fs.writeFileSync(`baseline${slug}.png`, buf);
  }
}

async function compareWithBaseline() {
  let failed = false;
  for (const url of PAGES) {
    const slug     = new URL(url).pathname.replace(/\//g, '-') || 'home';
    const current  = PNG.sync.read(await api.screenshot({ url, width: 1280, height: 800 }));
    const baseline = PNG.sync.read(fs.readFileSync(`baseline${slug}.png`));
    const diff     = new PNG({ width: current.width, height: current.height });
    const changed  = pixelmatch(baseline.data, current.data, diff.data, current.width, current.height, { threshold: 0.1 });
    const pct      = (changed / (current.width * current.height) * 100).toFixed(2);
    if (changed > 100) { // more than 100 pixels different
      console.error(`FAIL ${url} — ${pct}% changed (${changed} pixels)`);
      fs.writeFileSync(`diff${slug}.png`, PNG.sync.write(diff));
      failed = true;
    } else {
      console.log(`OK   ${url} — ${pct}% changed`);
    }
  }
  if (failed) process.exit(1); // fail CI step
}

// Run: CAPTURE=1 for baseline, nothing for comparison
process.env.CAPTURE ? captureBaseline() : compareWithBaseline();

SnapAPI always runs the same Chromium version on consistent infrastructure — no per-runner variation, no subpixel drift between OS environments.

Compatible with your existing tools

SnapAPI provides the screenshots. You use whatever diff tool you already have.