Visual Regression Testing API

javascript
const axios = require("axios");
const fs = require("fs");
const { PNG } = require("pngjs");
const pixelmatch = require("pixelmatch");

const API_KEY = process.env.SCREENSHOT_API_KEY;
const API_URL = "https://screenshotapi.to/api/v1/screenshot";

async function captureScreenshot(url, viewport = { width: 1440, height: 900 }) {
  const response = await axios.get(API_URL, {
    params: {
      url,
      width: viewport.width,
      height: viewport.height,
      type: "png",
      waitUntil: "networkidle",
    },
    headers: { "x-api-key": API_KEY },
    responseType: "arraybuffer",
  });
  return Buffer.from(response.data);
}

function compareImages(baselineBuffer, candidateBuffer) {
  const baseline = PNG.sync.read(baselineBuffer);
  const candidate = PNG.sync.read(candidateBuffer);
  const { width, height } = baseline;
  const diff = new PNG({ width, height });

  const mismatchedPixels = pixelmatch(
    baseline.data,
    candidate.data,
    diff.data,
    width,
    height,
    { threshold: 0.1 }
  );

  const totalPixels = width * height;
  const diffPercentage = (mismatchedPixels / totalPixels) * 100;

  return {
    mismatchedPixels,
    diffPercentage,
    diffImage: PNG.sync.write(diff),
  };
}

async function runVisualTest(baselineUrl, candidateUrl, pageName) {
  console.log(`Testing: ${pageName}`);

  const [baseline, candidate] = await Promise.all([
    captureScreenshot(baselineUrl),
    captureScreenshot(candidateUrl),
  ]);

  const result = compareImages(baseline, candidate);

  if (result.diffPercentage > 0.5) {
    fs.writeFileSync(`diff-${pageName}.png`, result.diffImage);
    console.error(
      `FAIL: ${pageName} has ${result.diffPercentage.toFixed(2)}% visual difference`
    );
    return false;
  }

  console.log(`PASS: ${pageName} (${result.diffPercentage.toFixed(2)}% diff)`);
  return true;
}

python
import io
import os
import httpx
from PIL import Image, ImageChops
import numpy as np

API_KEY = os.environ["SCREENSHOT_API_KEY"]
API_URL = "https://screenshotapi.to/api/v1/screenshot"

def capture_screenshot(url: str, width: int = 1440, height: int = 900) -> bytes:
    response = httpx.get(
        API_URL,
        params={
            "url": url,
            "width": width,
            "height": height,
            "type": "png",
            "waitUntil": "networkidle",
        },
        headers={"x-api-key": API_KEY},
    )
    response.raise_for_status()
    return response.content

def compare_images(baseline_bytes: bytes, candidate_bytes: bytes) -> dict:
    baseline = Image.open(io.BytesIO(baseline_bytes)).convert("RGB")
    candidate = Image.open(io.BytesIO(candidate_bytes)).convert("RGB")

    diff = ImageChops.difference(baseline, candidate)
    diff_array = np.array(diff)
    changed_pixels = np.count_nonzero(diff_array.sum(axis=2))
    total_pixels = diff_array.shape[0] * diff_array.shape[1]
    diff_percentage = (changed_pixels / total_pixels) * 100

    return {
        "changed_pixels": int(changed_pixels),
        "diff_percentage": round(diff_percentage, 2),
        "diff_image": diff,
    }

def run_visual_test(baseline_url: str, candidate_url: str, threshold: float = 0.5) -> bool:
    baseline = capture_screenshot(baseline_url)
    candidate = capture_screenshot(candidate_url)
    result = compare_images(baseline, candidate)

    if result["diff_percentage"] > threshold:
        result["diff_image"].save("visual-diff.png")
        print(f"FAIL: {result['diff_percentage']}% difference detected")
        return False

    print(f"PASS: {result['diff_percentage']}% difference (within threshold)")
    return True

yaml
name: Visual Regression Tests
on:
  pull_request:
    branches: [main]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Run visual regression tests
        env:
          SCREENSHOT_API_KEY: ${{ secrets.SCREENSHOT_API_KEY }}
          BASELINE_URL: https://main.yourapp.com
          CANDIDATE_URL: ${{ github.event.pull_request.head.ref }}.yourapp.com
        run: |
          pip install httpx pillow numpy
          python visual_test.py

      - name: Upload diff images
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: visual-diffs
          path: "*.png"

javascript
const viewports = [
  { name: "mobile", width: 375, height: 812 },
  { name: "tablet", width: 768, height: 1024 },
  { name: "desktop", width: 1440, height: 900 },
];

const pages = [
  { name: "homepage", path: "/" },
  { name: "pricing", path: "/pricing" },
  { name: "checkout", path: "/checkout" },
];

async function runAllTests(baseUrl, candidateBaseUrl) {
  const results = [];

  for (const page of pages) {
    for (const viewport of viewports) {
      const passed = await runVisualTest(
        `${baseUrl}${page.path}`,
        `${candidateBaseUrl}${page.path}`,
        `${page.name}-${viewport.name}`
      );
      results.push({ page: page.name, viewport: viewport.name, passed });
    }
  }

  const failures = results.filter((r) => !r.passed);
  if (failures.length > 0) {
    console.error(`${failures.length} visual regression(s) detected`);
    process.exit(1);
  }
}

javascript
const sharp = require("sharp");

async function captureRegion(url, region) {
  const fullScreenshot = await captureScreenshot(url);
  return sharp(fullScreenshot)
    .extract({
      left: region.x,
      top: region.y,
      width: region.width,
      height: region.height,
    })
    .toBuffer();
}

javascript
params: {
  url: pageUrl,
  width: 1440,
  fullPage: true,
  type: "png",
  waitUntil: "networkidle",
}