|
| 1 | +#!/usr/bin/env node |
| 2 | + |
| 3 | +import { createHash } from "node:crypto"; |
| 4 | +import fs from "node:fs/promises"; |
| 5 | +import path from "node:path"; |
| 6 | +import process from "node:process"; |
| 7 | + |
| 8 | +const args = new Set(process.argv.slice(2)); |
| 9 | +const getArgValue = (flag, fallback) => { |
| 10 | + const idx = process.argv.indexOf(flag); |
| 11 | + if (idx === -1 || idx + 1 >= process.argv.length) return fallback; |
| 12 | + return process.argv[idx + 1]; |
| 13 | +}; |
| 14 | + |
| 15 | +const BASE_URL = getArgValue("--base", process.env.BASE_URL || "http://localhost:3000"); |
| 16 | +const UPDATE_BASELINE = args.has("--update-baseline"); |
| 17 | +const TAKE_SCREENSHOTS = args.has("--screenshots"); |
| 18 | +const OUT_DIR = path.resolve("artifacts/site-regression"); |
| 19 | +const BASELINE_FILE = path.resolve("scripts/site-regression-baseline.json"); |
| 20 | + |
| 21 | +const ROUTES = ["/projects", "/for-hiring-managers", "/work-with-me"]; |
| 22 | +const VIEWPORTS = [ |
| 23 | + { name: "desktop", width: 1440, height: 900 }, |
| 24 | + { name: "mobile", width: 390, height: 844 }, |
| 25 | +]; |
| 26 | + |
| 27 | +function keyFor(route, viewportName) { |
| 28 | + return `${route}|${viewportName}`; |
| 29 | +} |
| 30 | + |
| 31 | +function sha256(content) { |
| 32 | + return createHash("sha256").update(content).digest("hex"); |
| 33 | +} |
| 34 | + |
| 35 | +async function ensureDir(dir) { |
| 36 | + await fs.mkdir(dir, { recursive: true }); |
| 37 | +} |
| 38 | + |
| 39 | +async function loadBaseline() { |
| 40 | + try { |
| 41 | + const raw = await fs.readFile(BASELINE_FILE, "utf8"); |
| 42 | + const parsed = JSON.parse(raw); |
| 43 | + return parsed && typeof parsed === "object" ? parsed : { hashes: {} }; |
| 44 | + } catch { |
| 45 | + return { hashes: {} }; |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +async function saveBaseline(data) { |
| 50 | + await fs.writeFile(BASELINE_FILE, `${JSON.stringify(data, null, 2)}\n`, "utf8"); |
| 51 | +} |
| 52 | + |
| 53 | +async function runStatusChecks() { |
| 54 | + const results = []; |
| 55 | + for (const route of ROUTES) { |
| 56 | + const url = `${BASE_URL}${route}`; |
| 57 | + try { |
| 58 | + const res = await fetch(url, { redirect: "follow" }); |
| 59 | + results.push({ |
| 60 | + route, |
| 61 | + url, |
| 62 | + status: res.status, |
| 63 | + ok: res.status >= 200 && res.status < 400, |
| 64 | + }); |
| 65 | + } catch (error) { |
| 66 | + results.push({ |
| 67 | + route, |
| 68 | + url, |
| 69 | + status: 0, |
| 70 | + ok: false, |
| 71 | + error: String(error), |
| 72 | + }); |
| 73 | + } |
| 74 | + } |
| 75 | + return results; |
| 76 | +} |
| 77 | + |
| 78 | +async function runScreenshotChecks(baseline) { |
| 79 | + const { chromium } = await import("playwright"); |
| 80 | + const browser = await chromium.launch({ headless: true }); |
| 81 | + const screenshotHashes = {}; |
| 82 | + const mismatches = []; |
| 83 | + const captureDir = path.join(OUT_DIR, new Date().toISOString().replace(/[:.]/g, "-")); |
| 84 | + await ensureDir(captureDir); |
| 85 | + |
| 86 | + try { |
| 87 | + for (const viewport of VIEWPORTS) { |
| 88 | + const context = await browser.newContext({ |
| 89 | + viewport: { width: viewport.width, height: viewport.height }, |
| 90 | + deviceScaleFactor: 1, |
| 91 | + }); |
| 92 | + const page = await context.newPage(); |
| 93 | + |
| 94 | + for (const route of ROUTES) { |
| 95 | + const url = `${BASE_URL}${route}`; |
| 96 | + await page.goto(url, { waitUntil: "networkidle", timeout: 45_000 }); |
| 97 | + const fileName = `${route.replace(/\//g, "_").replace(/^_/, "") || "home"}-${viewport.name}.png`; |
| 98 | + const filePath = path.join(captureDir, fileName); |
| 99 | + await page.screenshot({ path: filePath, fullPage: true }); |
| 100 | + const image = await fs.readFile(filePath); |
| 101 | + const hash = sha256(image); |
| 102 | + const key = keyFor(route, viewport.name); |
| 103 | + screenshotHashes[key] = hash; |
| 104 | + |
| 105 | + const baselineHash = baseline.hashes?.[key]; |
| 106 | + if (baselineHash && baselineHash !== hash) { |
| 107 | + mismatches.push({ |
| 108 | + key, |
| 109 | + route, |
| 110 | + viewport: viewport.name, |
| 111 | + baselineHash, |
| 112 | + currentHash: hash, |
| 113 | + filePath, |
| 114 | + }); |
| 115 | + } |
| 116 | + } |
| 117 | + |
| 118 | + await context.close(); |
| 119 | + } |
| 120 | + } finally { |
| 121 | + await browser.close(); |
| 122 | + } |
| 123 | + |
| 124 | + return { screenshotHashes, mismatches, captureDir }; |
| 125 | +} |
| 126 | + |
| 127 | +function printStatus(results) { |
| 128 | + console.log("\nSite status checks"); |
| 129 | + for (const r of results) { |
| 130 | + if (r.ok) { |
| 131 | + console.log(` OK ${r.status} ${r.route}`); |
| 132 | + } else { |
| 133 | + console.log(` FAIL ${r.status} ${r.route}${r.error ? ` (${r.error})` : ""}`); |
| 134 | + } |
| 135 | + } |
| 136 | +} |
| 137 | + |
| 138 | +function printMismatches(mismatches) { |
| 139 | + if (!mismatches.length) { |
| 140 | + console.log("\nScreenshot diff"); |
| 141 | + console.log(" OK no screenshot hash regressions"); |
| 142 | + return; |
| 143 | + } |
| 144 | + console.log("\nScreenshot diff"); |
| 145 | + for (const m of mismatches) { |
| 146 | + console.log(` FAIL ${m.route} (${m.viewport})`); |
| 147 | + console.log(` baseline: ${m.baselineHash}`); |
| 148 | + console.log(` current : ${m.currentHash}`); |
| 149 | + } |
| 150 | +} |
| 151 | + |
| 152 | +async function main() { |
| 153 | + console.log(`Running site regression checks against ${BASE_URL}`); |
| 154 | + const statusResults = await runStatusChecks(); |
| 155 | + printStatus(statusResults); |
| 156 | + |
| 157 | + const baseline = await loadBaseline(); |
| 158 | + let screenshotResult = { screenshotHashes: {}, mismatches: [], captureDir: null }; |
| 159 | + |
| 160 | + if (TAKE_SCREENSHOTS) { |
| 161 | + screenshotResult = await runScreenshotChecks(baseline); |
| 162 | + printMismatches(screenshotResult.mismatches); |
| 163 | + if (screenshotResult.captureDir) { |
| 164 | + console.log(`\nScreenshots saved: ${screenshotResult.captureDir}`); |
| 165 | + } |
| 166 | + } else { |
| 167 | + console.log("\nScreenshot diff"); |
| 168 | + console.log(" SKIP run with --screenshots to capture and compare"); |
| 169 | + } |
| 170 | + |
| 171 | + if (UPDATE_BASELINE && TAKE_SCREENSHOTS) { |
| 172 | + await saveBaseline({ hashes: screenshotResult.screenshotHashes }); |
| 173 | + console.log(`\nBaseline updated: ${BASELINE_FILE}`); |
| 174 | + } |
| 175 | + |
| 176 | + const statusOk = statusResults.every((r) => r.ok); |
| 177 | + const screenshotsOk = !TAKE_SCREENSHOTS || screenshotResult.mismatches.length === 0; |
| 178 | + process.exit(statusOk && screenshotsOk ? 0 : 1); |
| 179 | +} |
| 180 | + |
| 181 | +main().catch((error) => { |
| 182 | + console.error(error); |
| 183 | + process.exit(1); |
| 184 | +}); |
0 commit comments