Website Screenshot Monitoring

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

const API_KEY = process.env.SCREENSHOT_API_KEY;
const SLACK_WEBHOOK = process.env.SLACK_WEBHOOK_URL;
const SNAPSHOTS_DIR = "./snapshots";

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

function getSnapshotPath(url) {
  const slug = url.replace(/[^a-zA-Z0-9]/g, "_");
  return path.join(SNAPSHOTS_DIR, `${slug}.png`);
}

async function monitorUrl(url, threshold = 1.0) {
  const snapshotPath = getSnapshotPath(url);
  const newScreenshot = await captureScreenshot(url);

  if (!fs.existsSync(snapshotPath)) {
    fs.mkdirSync(SNAPSHOTS_DIR, { recursive: true });
    fs.writeFileSync(snapshotPath, newScreenshot);
    console.log(`Baseline saved for ${url}`);
    return;
  }

  const baseline = PNG.sync.read(fs.readFileSync(snapshotPath));
  const current = PNG.sync.read(newScreenshot);
  const { width, height } = baseline;
  const diff = new PNG({ width, height });

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

  const diffPercent = (mismatchedPixels / (width * height)) * 100;

  if (diffPercent > threshold) {
    fs.writeFileSync(snapshotPath.replace(".png", "-diff.png"), PNG.sync.write(diff));
    await sendSlackAlert(url, diffPercent);
    console.log(`CHANGE DETECTED on ${url}: ${diffPercent.toFixed(2)}%`);
  } else {
    console.log(`No significant change on ${url}: ${diffPercent.toFixed(2)}%`);
  }

  fs.writeFileSync(snapshotPath, newScreenshot);
}

async function sendSlackAlert(url, diffPercent) {
  await axios.post(SLACK_WEBHOOK, {
    text: `Visual change detected on ${url}\nDifference: ${diffPercent.toFixed(2)}%\nReview the diff image for details.`,
  });
}

const URLS_TO_MONITOR = [
  "https://yourapp.com",
  "https://yourapp.com/pricing",
  "https://yourapp.com/checkout",
];

async function runMonitor() {
  for (const url of URLS_TO_MONITOR) {
    await monitorUrl(url);
  }
}

runMonitor();

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

API_KEY = os.environ["SCREENSHOT_API_KEY"]
SNAPSHOTS_DIR = Path("./snapshots")
SNAPSHOTS_DIR.mkdir(exist_ok=True)

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

def get_snapshot_path(url: str) -> Path:
    slug = hashlib.md5(url.encode()).hexdigest()[:12]
    return SNAPSHOTS_DIR / f"{slug}.png"

def compare_screenshots(baseline_bytes: bytes, current_bytes: bytes) -> float:
    baseline = Image.open(io.BytesIO(baseline_bytes)).convert("RGB")
    current = Image.open(io.BytesIO(current_bytes)).convert("RGB")
    diff = ImageChops.difference(baseline, current)
    diff_array = np.array(diff)
    changed = np.count_nonzero(diff_array.sum(axis=2))
    total = diff_array.shape[0] * diff_array.shape[1]
    return (changed / total) * 100

def send_alert(url: str, diff_percent: float):
    webhook_url = os.environ.get("SLACK_WEBHOOK_URL")
    if webhook_url:
        httpx.post(webhook_url, json={
            "text": f"Visual change detected on {url}\nDifference: {diff_percent:.2f}%"
        })

def monitor_url(url: str, threshold: float = 1.0):
    snapshot_path = get_snapshot_path(url)
    current = capture_screenshot(url)

    if not snapshot_path.exists():
        snapshot_path.write_bytes(current)
        print(f"Baseline saved for {url}")
        return

    baseline = snapshot_path.read_bytes()
    diff_percent = compare_screenshots(baseline, current)

    if diff_percent > threshold:
        send_alert(url, diff_percent)
        print(f"CHANGE DETECTED on {url}: {diff_percent:.2f}%")
    else:
        print(f"No change on {url}: {diff_percent:.2f}%")

    snapshot_path.write_bytes(current)

URLS = [
    "https://yourapp.com",
    "https://yourapp.com/pricing",
    "https://yourapp.com/checkout",
]

for url in URLS:
    monitor_url(url)

yaml
name: Website Visual Monitor
on:
  schedule:
    - cron: "0 */6 * * *" # Every 6 hours
  workflow_dispatch: # Manual trigger

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

      - name: Restore previous snapshots
        uses: actions/cache@v4
        with:
          path: ./snapshots
          key: visual-monitor-snapshots

      - name: Run visual monitor
        env:
          SCREENSHOT_API_KEY: ${{ secrets.SCREENSHOT_API_KEY }}
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
        run: |
          pip install httpx pillow numpy
          python monitor.py

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

javascript
const colorSchemes = ["light", "dark"];

for (const scheme of colorSchemes) {
  await captureScreenshot(url, { colorScheme: scheme });
}