Visual Regression Testing
Automated Screenshot Comparison for CI/CD

import requests
from PIL import Image
import numpy as np

API = 'https://api.snaprender.dev/v1/screenshot'
HEADERS = {'Authorization': 'Bearer YOUR_KEY'}

def capture(url, name):
    resp = requests.post(API, headers=HEADERS, json={
        'url': url,
        'width': 1280,
        'height': 800,
        'format': 'png',
        'full_page': True
    })
    with open(f'{name}.png', 'wb') as f:
        f.write(resp.content)

# Step 1: Capture baseline
capture('https://staging.example.com', 'baseline')

# Step 2: Deploy changes, capture new version
capture('https://staging.example.com', 'current')

# Step 3: Compare images
baseline = np.array(Image.open('baseline.png'))
current = np.array(Image.open('current.png'))

diff = np.abs(baseline.astype(int) - current.astype(int))
changed_pixels = np.sum(diff > 10)  # threshold
total_pixels = baseline.shape[0] * baseline.shape[1]
diff_percent = (changed_pixels / total_pixels) * 100

print(f'Visual diff: {diff_percent:.2f}%')
if diff_percent > 0.1:
    print('FAIL: Visual regression detected!')
    exit(1)

const fs = require('fs');
const { PNG } = require('pngjs');
const pixelmatch = require('pixelmatch');

const API = 'https://api.snaprender.dev/v1/screenshot';
const HEADERS = {
  'Authorization': 'Bearer YOUR_KEY',
  'Content-Type': 'application/json'
};

async function capture(url) {
  const res = await fetch(API, {
    method: 'POST',
    headers: HEADERS,
    body: JSON.stringify({
      url,
      width: 1280,
      height: 800,
      format: 'png',
      full_page: true
    })
  });
  return Buffer.from(await res.arrayBuffer());
}

// Capture baseline and current
const baseline = PNG.sync.read(await capture(url));
const current = PNG.sync.read(await capture(url));
const { width, height } = baseline;
const diff = new PNG({ width, height });

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

const diffPercent = (mismatch / (width * height)) * 100;
console.log(`Visual diff: ${diffPercent.toFixed(2)}%`);

if (diffPercent > 0.1) {
  // Save diff image for review
  fs.writeFileSync('diff.png', PNG.sync.write(diff));
  process.exit(1);
}