Competitor Website Monitoring

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

const API_KEY = process.env.SCREENSHOT_API_KEY;
const SNAPSHOTS_DIR = "./competitor-snapshots";

const COMPETITORS = [
  {
    name: "Competitor A",
    pages: [
      { label: "pricing", url: "https://competitor-a.com/pricing" },
      { label: "features", url: "https://competitor-a.com/features" },
      { label: "homepage", url: "https://competitor-a.com" },
    ],
  },
  {
    name: "Competitor B",
    pages: [
      { label: "pricing", url: "https://competitor-b.com/pricing" },
      { label: "homepage", url: "https://competitor-b.com" },
    ],
  },
];

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",
      delay: 2000,
    },
    headers: { "x-api-key": API_KEY },
    responseType: "arraybuffer",
  });
  return Buffer.from(response.data);
}

function getSnapshotDir(competitorName, pageLabel) {
  const dir = path.join(SNAPSHOTS_DIR, competitorName, pageLabel);
  fs.mkdirSync(dir, { recursive: true });
  return dir;
}

async function monitorCompetitor(competitor) {
  const changes = [];

  for (const page of competitor.pages) {
    const dir = getSnapshotDir(competitor.name, page.label);
    const latestPath = path.join(dir, "latest.png");
    const newScreenshot = await captureScreenshot(page.url);

    if (fs.existsSync(latestPath)) {
      const previous = PNG.sync.read(fs.readFileSync(latestPath));
      const current = PNG.sync.read(newScreenshot);
      const { width, height } = previous;
      const diff = new PNG({ width, height });

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

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

      if (diffPercent > 2.0) {
        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
        fs.writeFileSync(path.join(dir, `${timestamp}-diff.png`), PNG.sync.write(diff));
        fs.writeFileSync(path.join(dir, `${timestamp}.png`), newScreenshot);

        changes.push({
          competitor: competitor.name,
          page: page.label,
          url: page.url,
          diffPercent: diffPercent.toFixed(2),
        });
      }
    }

    fs.writeFileSync(latestPath, newScreenshot);
  }

  return changes;
}

async function runMonitoringCycle() {
  const allChanges = [];

  for (const competitor of COMPETITORS) {
    const changes = await monitorCompetitor(competitor);
    allChanges.push(...changes);
  }

  if (allChanges.length > 0) {
    await sendNotification(allChanges);
  }

  return allChanges;
}

async function sendNotification(changes) {
  const message = changes
    .map((c) => `${c.competitor} - ${c.page}: ${c.diffPercent}% changed (${c.url})`)
    .join("\n");

  await axios.post(process.env.SLACK_WEBHOOK_URL, {
    text: `Competitor changes detected:\n${message}`,
  });
}

runMonitoringCycle();

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

API_KEY = os.environ["SCREENSHOT_API_KEY"]
SNAPSHOTS_DIR = Path("./competitor-snapshots")

COMPETITORS = [
    {
        "name": "competitor-a",
        "pages": [
            {"label": "pricing", "url": "https://competitor-a.com/pricing"},
            {"label": "features", "url": "https://competitor-a.com/features"},
        ],
    },
    {
        "name": "competitor-b",
        "pages": [
            {"label": "pricing", "url": "https://competitor-b.com/pricing"},
            {"label": "homepage", "url": "https://competitor-b.com"},
        ],
    },
]

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",
            "delay": 2000,
        },
        headers={"x-api-key": API_KEY},
    )
    response.raise_for_status()
    return response.content

def compare_screenshots(previous: bytes, current: bytes) -> float:
    img_prev = Image.open(io.BytesIO(previous)).convert("RGB")
    img_curr = Image.open(io.BytesIO(current)).convert("RGB")
    diff = ImageChops.difference(img_prev, img_curr)
    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 monitor_all():
    changes = []

    for competitor in COMPETITORS:
        for page in competitor["pages"]:
            snapshot_dir = SNAPSHOTS_DIR / competitor["name"] / page["label"]
            snapshot_dir.mkdir(parents=True, exist_ok=True)
            latest_path = snapshot_dir / "latest.png"

            current = capture_screenshot(page["url"])

            if latest_path.exists():
                previous = latest_path.read_bytes()
                diff_pct = compare_screenshots(previous, current)

                if diff_pct > 2.0:
                    timestamp = datetime.utcnow().strftime("%Y%m%d-%H%M%S")
                    (snapshot_dir / f"{timestamp}.png").write_bytes(current)
                    changes.append({
                        "competitor": competitor["name"],
                        "page": page["label"],
                        "url": page["url"],
                        "diff_percent": round(diff_pct, 2),
                    })

            latest_path.write_bytes(current)

    if changes:
        send_notification(changes)
    return changes

def send_notification(changes: list):
    webhook = os.environ.get("SLACK_WEBHOOK_URL")
    if webhook:
        lines = [f"{c['competitor']} - {c['page']}: {c['diff_percent']}% changed" for c in changes]
        httpx.post(webhook, json={"text": "Competitor changes:\n" + "\n".join(lines)})

monitor_all()

yaml
name: Competitor Monitor
on:
  schedule:
    - cron: "0 9 * * *" # Daily at 9 AM UTC
  workflow_dispatch:

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

      - name: Restore snapshots
        uses: actions/cache@v4
        with:
          path: ./competitor-snapshots
          key: competitor-snapshots-${{ github.run_number }}
          restore-keys: competitor-snapshots-

      - name: Run competitor 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 sharp = require("sharp");

async function comparePricingTable(previousBuffer, currentBuffer) {
  const region = { left: 100, top: 400, width: 1200, height: 600 };

  const previousCrop = await sharp(previousBuffer).extract(region).toBuffer();
  const currentCrop = await sharp(currentBuffer).extract(region).toBuffer();

  return compareImages(previousCrop, currentCrop);
}

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