1
import { chromium } from "playwright";
2
import pixelmatch from "pixelmatch";
3
import { PNG } from "pngjs";
4
import fs from "fs";
5
import path from "path";
6

7
const BASELINE_DIR = "./screenshots/baseline";
8
const DIFF_DIR = "./screenshots/diff";
9
const THRESHOLD = 0.03; // Alert when pixel difference exceeds 3%
10

11
interface CheckResult {
12
  passed: boolean;
13
  diffPercent: number;
14
  diffImagePath: string;
15
}
16

17
async function captureScreenshot(url: string, name: string): Promise<Buffer> {
18
  const browser = await chromium.launch();
19
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
20

21
  // Wait for network idle so async content has finished loading
22
  await page.goto(url, { waitUntil: "networkidle" });
23
  // Wait an extra 2 seconds so animations can finish
24
  await page.waitForTimeout(2000);
25

26
  const screenshot = await page.screenshot({ fullPage: false });
27
  await browser.close();
28
  return screenshot;
29
}
30

31
function compareScreenshots(
32
  current: Buffer,
33
  name: string
34
): CheckResult {
35
  const currentPng = PNG.sync.read(current);
36
  const baselinePath = path.join(BASELINE_DIR, `${name}.png`);
37
  const diffPath = path.join(DIFF_DIR, `${name}.png`);
38

39
  if (!fs.existsSync(baselinePath)) {
40
    // First run: save as baseline image
41
    fs.writeFileSync(baselinePath, current);
42
    console.log(`[${name}] Baseline image created`);
43
    return { passed: true, diffPercent: 0, diffImagePath: "" };
44
  }
45

46
  const baselinePng = PNG.sync.read(fs.readFileSync(baselinePath));
47
  const { width, height } = currentPng;
48
  const diff = new PNG({ width, height });
49

50
  const diffPixels = pixelmatch(
51
    baselinePng.data,
52
    currentPng.data,
53
    diff.data,
54
    width,
55
    height,
56
    { threshold: 0.1 }
57
  );
58

59
  const diffPercent = diffPixels / (width * height);
60

61
  if (diffPercent > THRESHOLD) {
62
    fs.mkdirSync(DIFF_DIR, { recursive: true });
63
    fs.writeFileSync(diffPath, PNG.sync.write(diff));
64
    return { passed: false, diffPercent, diffImagePath: diffPath };
65
  }
66

67
  return { passed: true, diffPercent, diffImagePath: "" };
68
}
69

70
async function patrol(pages: Array<{ url: string; name: string }>) {
71
  for (const { url, name } of pages) {
72
    const screenshot = await captureScreenshot(url, name);
73
    const result = compareScreenshots(screenshot, name);
74

75
    if (!result.passed) {
76
      sendAlert({
77
        page: name,
78
        diffPercent: (result.diffPercent * 100).toFixed(2),
79
        diffImage: result.diffImagePath,
80
      });
81
      // Keep a current screenshot when an issue is detected
82
      fs.writeFileSync(
83
        path.join(DIFF_DIR, `${name}_current.png`),
84
        screenshot
85
      );
86
    }
87
  }
88
}
89

90
function sendAlert(data: Record<string, string>) {
91
  // Replace with your own notification channel: Slack, Teams, or webhook
92
  console.log(`⚠️ Page anomaly alert:`, JSON.stringify(data, null, 2));
93
}