Website screenshot monitoring.

// capture.mjs: take a screenshot of each page and save it under today's date.
import { mkdir, writeFile } from 'node:fs/promises';

// The pages to watch. Each name becomes a folder: captures/pricing/...
const pages = {
  home: 'https://example.com/',
  pricing: 'https://example.com/pricing',
};

const today = new Date().toISOString().slice(0, 10); // e.g. 2026-09-28

// One page at a time, so the script never runs more renders at once than your plan allows.
for (const [name, url] of Object.entries(pages)) {
  const params = new URLSearchParams({
    url,
    full_page: 'true',
    viewport_width: '1440',
    format: 'png',
    wait_until: 'networkidle2',
    block_cookie_banners: 'true',
  });

  const response = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
    headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
  });

  if (!response.ok) {
    // Report the error and move on, so one broken page doesn't stop the others.
    const { error } = await response.json();
    console.error(`${name}: ${error.code} (request ${error.requestId})`);
    process.exitCode = 1;
    continue;
  }

  // Saves captures/pricing/2026-09-28.png
  await mkdir(`captures/${name}`, { recursive: true });
  await writeFile(`captures/${name}/${today}.png`, Buffer.from(await response.arrayBuffer()));
}

crontab

# Every day at 06:00. --env-file (Node 20.6+) keeps the key out of the crontab.
0 6 * * * cd /srv/page-history && node --env-file=.env capture.mjs >> capture.log 2>&1

GitHub Actions

# .github/workflows/capture.yml
name: Capture pages
on:
  schedule:
    - cron: '0 6 * * *' # every day at 06:00 UTC
  workflow_dispatch: # and on demand

jobs:
  capture:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: node capture.mjs
        env:
          URLSHOT_API_KEY: ${{ secrets.URLSHOT_API_KEY }}
      - uses: actions/upload-artifact@v4
        with:
          name: captures-${{ github.run_id }}
          path: captures/

// compare.mjs: compare yesterday's and today's screenshot of a page.
// npm install pixelmatch pngjs
import { readFileSync, writeFileSync } from 'node:fs';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';

const before = PNG.sync.read(readFileSync('captures/pricing/2026-09-27.png'));
const after = PNG.sync.read(readFileSync('captures/pricing/2026-09-28.png'));

// pixelmatch can only compare two images of the same size. A page that grew or
// shrank has changed anyway, so report that and stop.
if (before.width !== after.width || before.height !== after.height) {
  console.log(`The page changed size: ${before.width}×${before.height} → ${after.width}×${after.height}`);
  process.exit(1);
}

// Count the pixels that differ, and draw them in red in a third image.
const { width, height } = after;
const diff = new PNG({ width, height });
const changed = pixelmatch(before.data, after.data, diff.data, width, height, {
  threshold: 0.1, // how different one pixel must be to count, from 0 to 1
});

const percent = (changed / (width * height)) * 100;
console.log(`${percent.toFixed(2)}% of the page changed`);

// Ignore tiny differences; flag anything over 0.1% of the page.
if (percent > 0.1) {
  writeFileSync('diff.png', PNG.sync.write(diff));
  process.exit(1);
}