Visual Regression Testing

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

async function captureScreenshot(url) {
    const params = new URLSearchParams({
        url,
        api_key: process.env.SNAPAPI_KEY,
        width: '1280',
        height: '720',
        response: 'binary'
    });
    
    const response = await fetch(
        `https://snapapi.alterra-solutions.com/v1/screenshot?${params}`
    );
    return Buffer.from(await response.arrayBuffer());
}

describe('Visual Regression Tests', () => {
    test('Homepage matches baseline', async () => {
        const current = await captureScreenshot('https://staging.yoursite.com');
        const baseline = fs.readFileSync('./baselines/homepage.png');
        
        const img1 = PNG.sync.read(baseline);
        const img2 = PNG.sync.read(current);
        const { width, height } = img1;
        
        const diff = new PNG({ width, height });
        const numDiffPixels = pixelmatch(
            img1.data, img2.data, diff.data, 
            width, height, { threshold: 0.1 }
        );
        
        const diffPercent = (numDiffPixels / (width * height)) * 100;
        expect(diffPercent).toBeLessThan(1); // Less than 1% difference
    });
});

# .github/workflows/visual-tests.yml
name: Visual Regression Tests

on: [pull_request]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        
      - name: Install dependencies
        run: npm install
        
      - name: Run visual tests
        env:
          SNAPAPI_KEY: ${{ secrets.SNAPAPI_KEY }}
        run: npm run test:visual
        
      - name: Upload diff images
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: visual-diffs
          path: ./test-results/