Tutorial

How to Automate Website Monitoring with Screenshots

April 2026 · 8 min read

Screenshot-based website monitoring catches things that uptime monitors miss: visual regressions, broken layouts, changed content, competitor price updates, and defaced pages. In this tutorial we'll build a complete monitoring system from scratch using Node.js, SnapAPI for screenshots, S3 for storage, and Slack for alerts.

What We're Building

A cron job that runs every hour, captures screenshots of a list of URLs, compares each screenshot to the previous one using a pixel-difference algorithm, and sends a Slack notification with the before/after images when a significant change is detected. The whole system runs in under 200MB of RAM with no browser to manage.

Prerequisites

Node.js 20+, an AWS S3 bucket (or any object storage), a Slack incoming webhook URL, and a SnapAPI key (free tier at snapapi.pics — 200 captures/month, no credit card).

Project Setup

mkdir site-monitor && cd site-monitor
npm init -y
npm install @aws-sdk/client-s3 node-cron sharp

Configuration

// config.js
export default {
  snapapiKey: process.env.SNAPAPI_KEY,
  slackWebhook: process.env.SLACK_WEBHOOK_URL,
  s3Bucket: process.env.S3_BUCKET,
  changeThreshold: 0.02,  // 2% pixel difference triggers alert
  sites: [
    { name: 'Homepage', url: 'https://yoursite.com', width: 1280 },
    { name: 'Pricing', url: 'https://yoursite.com/pricing', width: 1280 },
    { name: 'Competitor', url: 'https://competitor.com', width: 1280, full_page: false },
  ],
};

Screenshot Capture

// capture.js
import config from './config.js';

export async function captureScreenshot(site) {
  const params = new URLSearchParams({
    access_key: config.snapapiKey,
    url: site.url,
    format: 'png',
    width: String(site.width || 1280),
    full_page: site.full_page !== false ? 'true' : 'false',
  });

  const res = await fetch(
    `https://api.snapapi.pics/v1/screenshot?${params}`
  );

  if (!res.ok) throw new Error(`SnapAPI error: ${res.status}`);
  return Buffer.from(await res.arrayBuffer());
}

S3 Storage Layer

// storage.js
import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
import config from './config.js';

const s3 = new S3Client({ region: 'us-east-1' });

export async function saveScreenshot(name, buffer) {
  const key = `screenshots/${name}/${Date.now()}.png`;
  await s3.send(new PutObjectCommand({
    Bucket: config.s3Bucket,
    Key: key,
    Body: buffer,
    ContentType: 'image/png',
  }));
  return key;
}

export async function getLatestScreenshot(name) {
  try {
    const key = `screenshots/${name}/latest.png`;
    const res = await s3.send(new GetObjectCommand({ Bucket: config.s3Bucket, Key: key }));
    const chunks = [];
    for await (const chunk of res.Body) chunks.push(chunk);
    return Buffer.concat(chunks);
  } catch {
    return null; // No previous screenshot
  }
}

export async function saveLatest(name, buffer) {
  await s3.send(new PutObjectCommand({
    Bucket: config.s3Bucket,
    Key: `screenshots/${name}/latest.png`,
    Body: buffer,
    ContentType: 'image/png',
  }));
}

Change Detection with Sharp

// diff.js
import sharp from 'sharp';

export async function computeDiff(bufA, bufB) {
  // Resize both to same dimensions for comparison
  const [imgA, imgB] = await Promise.all([
    sharp(bufA).resize(1280, 800, { fit: 'contain' }).raw().toBuffer({ resolveWithObject: true }),
    sharp(bufB).resize(1280, 800, { fit: 'contain' }).raw().toBuffer({ resolveWithObject: true }),
  ]);

  const { width, height, channels } = imgA.info;
  let diffPixels = 0;
  const totalPixels = width * height;

  for (let i = 0; i < imgA.data.length; i += channels) {
    const rDiff = Math.abs(imgA.data[i] - imgB.data[i]);
    const gDiff = Math.abs(imgA.data[i+1] - imgB.data[i+1]);
    const bDiff = Math.abs(imgA.data[i+2] - imgB.data[i+2]);
    if (rDiff + gDiff + bDiff > 30) diffPixels++;
  }

  return diffPixels / totalPixels;  // Returns 0.0 to 1.0
}

Slack Alerting

// alert.js
import config from './config.js';

export async function sendSlackAlert(site, diffPct, beforeUrl, afterUrl) {
  const pct = (diffPct * 100).toFixed(1);
  await fetch(config.slackWebhook, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text: `🚨 *${site.name}* changed by ${pct}%`,
      attachments: [
        { title: 'Before', image_url: beforeUrl },
        { title: 'After', image_url: afterUrl },
      ],
    }),
  });
}

Main Monitor Loop

// monitor.js
import cron from 'node-cron';
import config from './config.js';
import { captureScreenshot } from './capture.js';
import { saveScreenshot, getLatestScreenshot, saveLatest } from './storage.js';
import { computeDiff } from './diff.js';
import { sendSlackAlert } from './alert.js';

async function checkSite(site) {
  console.log(`Checking ${site.name}...`);
  const current = await captureScreenshot(site);
  const previous = await getLatestScreenshot(site.name);

  if (previous) {
    const diff = await computeDiff(previous, current);
    console.log(`  Diff: ${(diff * 100).toFixed(2)}%`);

    if (diff > config.changeThreshold) {
      const [beforeKey, afterKey] = await Promise.all([
        saveScreenshot(`${site.name}/before`, previous),
        saveScreenshot(`${site.name}/after`, current),
      ]);
      const baseUrl = `https://${config.s3Bucket}.s3.amazonaws.com`;
      await sendSlackAlert(site, diff, `${baseUrl}/${beforeKey}`, `${baseUrl}/${afterKey}`);
      console.log(`  ALERT sent for ${site.name}`);
    }
  }

  await saveLatest(site.name, current);
}

// Run immediately on startup, then every hour
async function runChecks() {
  for (const site of config.sites) {
    try { await checkSite(site); }
    catch (e) { console.error(`Failed ${site.name}:`, e.message); }
  }
}

runChecks();
cron.schedule('0 * * * *', runChecks);

Deployment Options

This monitor runs as a long-lived Node.js process. Deploy it on any small server — a $6/month Hetzner VPS or Fly.io machine is more than enough. Alternatively, convert it to a cron-triggered serverless function on AWS Lambda (using EventBridge scheduler) or Cloudflare Workers (using Cron Triggers). The SnapAPI call and S3 upload both work identically in serverless environments since they're plain HTTP calls with no native binaries.

Extending the System

Once the basic monitor is running, common extensions include: email alerts via Postmark or SendGrid alongside Slack, a simple web dashboard showing historical screenshots for each site, mobile viewport monitoring (add device: iPhone_15_Pro to your capture params), and competitor price tracking (use the extract endpoint instead of screenshot to pull specific text from competitor pages and alert when prices change).

Get Started

Sign up at snapapi.pics — free tier gives 200 captures/month with no credit card. For a monitor checking 5 sites hourly, that's 3,600 captures/month — well within the $19/month Starter plan. The full source code for this tutorial is available on GitHub at github.com/Sleywill/snapapi-monitor-example.

// Extract-based price monitor
async function checkPrice(url, selector) {
  const res = await fetch('https://api.snapapi.pics/v1/extract?' + new URLSearchParams({
    access_key: process.env.SNAPAPI_KEY,
    url,
    selector,
    fields: JSON.stringify({ price: '.price', stock: '.stock-status' }),
  }));
  const { data } = await res.json();
  return data[0]; // { price: '$99.99', stock: 'In Stock' }
}

# .github/workflows/monitor.yml
name: Site Monitor
on:
  schedule:
    - cron: '0 9 * * 1-5'  # 9am weekdays
  workflow_dispatch:

jobs:
  monitor:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: node monitor.js
        env:
          SNAPAPI_KEY: ${{ secrets.SNAPAPI_KEY }}
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
          S3_BUCKET: ${{ secrets.S3_BUCKET }}