281 lines
8.8 KiB
TypeScript
281 lines
8.8 KiB
TypeScript
/**
|
|
* Visual parity comparison: Angular vs React.
|
|
*
|
|
* Takes full-page screenshots of both apps for each route,
|
|
* then generates pixel-diff images using pixelmatch.
|
|
*
|
|
* Usage:
|
|
* npx tsx tests/parity/visual/screenshot-diff.ts
|
|
*
|
|
* Prerequisites:
|
|
* - Angular running on http://localhost:4200
|
|
* - React running on http://localhost:8080
|
|
* - Playwright browsers installed (npx playwright install chromium)
|
|
*/
|
|
|
|
import { chromium, type Page } from "@playwright/test";
|
|
import { mkdirSync, writeFileSync } from "node:fs";
|
|
import { resolve, join } from "node:path";
|
|
import { PNG } from "pngjs";
|
|
import pixelmatch from "pixelmatch";
|
|
import { mockAngularAPIs } from "../../e2e-angular/support/angular-api-mock.js";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Config
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const ANGULAR_BASE = "http://localhost:4200";
|
|
const REACT_BASE = "http://localhost:8080";
|
|
const OUTPUT_DIR = resolve(import.meta.dirname, "../../../screenshot-diffs");
|
|
const VIEWPORT = { width: 1440, height: 900 };
|
|
|
|
// Wait for network idle + extra settle time for animations
|
|
const SETTLE_MS = 1500;
|
|
|
|
interface RouteEntry {
|
|
name: string;
|
|
angular: string;
|
|
react: string;
|
|
/** Extra wait time in ms for pages that load data. */
|
|
waitMs?: number;
|
|
/** Scroll to capture full page? Default true. */
|
|
fullPage?: boolean;
|
|
}
|
|
|
|
const ROUTES: RouteEntry[] = [
|
|
{
|
|
name: "onlineboard-start",
|
|
angular: "/",
|
|
react: "/ru/onlineboard",
|
|
},
|
|
{
|
|
name: "onlineboard-departure",
|
|
angular: "/onlineboard/departure/AAQ/16042026-0000-2400",
|
|
react: "/ru/onlineboard/departure/AAQ/16042026-0000-2400",
|
|
waitMs: 3000,
|
|
},
|
|
{
|
|
name: "onlineboard-arrival",
|
|
angular: "/onlineboard/arrival/AAQ/16042026-0000-2400",
|
|
react: "/ru/onlineboard/arrival/AAQ/16042026-0000-2400",
|
|
waitMs: 3000,
|
|
},
|
|
{
|
|
name: "onlineboard-route",
|
|
angular: "/onlineboard/route/MOW-AER/16042026-0000-2400",
|
|
react: "/ru/onlineboard/route/MOW-AER/16042026-0000-2400",
|
|
waitMs: 3000,
|
|
},
|
|
{
|
|
name: "onlineboard-flight",
|
|
angular: "/onlineboard/flight/SU0022/16042026",
|
|
react: "/ru/onlineboard/flight/SU0022/16042026",
|
|
waitMs: 3000,
|
|
},
|
|
{
|
|
name: "schedule-start",
|
|
angular: "/schedule",
|
|
react: "/ru/schedule",
|
|
},
|
|
{
|
|
name: "schedule-route",
|
|
angular: "/schedule/route/MOW-KUF-20220425-20220501",
|
|
react: "/ru/schedule/route/MOW-KUF-20220425-20220501",
|
|
waitMs: 3000,
|
|
},
|
|
{
|
|
name: "flights-map",
|
|
angular: "/flights-map",
|
|
react: "/ru/flights-map",
|
|
waitMs: 2000,
|
|
},
|
|
{
|
|
name: "error-404",
|
|
angular: "/error/404",
|
|
react: "/error/404",
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
async function captureScreenshot(
|
|
page: Page,
|
|
url: string,
|
|
waitMs: number,
|
|
fullPage: boolean,
|
|
): Promise<Buffer> {
|
|
await page.goto(url, { waitUntil: "networkidle", timeout: 30_000 });
|
|
await page.waitForTimeout(waitMs);
|
|
return page.screenshot({ fullPage, type: "png" }) as Promise<Buffer>;
|
|
}
|
|
|
|
function alignAndDiff(
|
|
angularBuf: Buffer,
|
|
reactBuf: Buffer,
|
|
): { diffPng: PNG; mismatchCount: number; totalPixels: number; width: number; height: number } {
|
|
const angularPng = PNG.sync.read(angularBuf);
|
|
const reactPng = PNG.sync.read(reactBuf);
|
|
|
|
// Use the larger dimensions to avoid clipping
|
|
const width = Math.max(angularPng.width, reactPng.width);
|
|
const height = Math.max(angularPng.height, reactPng.height);
|
|
|
|
// Create canvases of uniform size, fill with white
|
|
const padded = (src: PNG): Buffer => {
|
|
const out = new PNG({ width, height });
|
|
// Fill white
|
|
for (let i = 0; i < out.data.length; i += 4) {
|
|
out.data[i] = 255;
|
|
out.data[i + 1] = 255;
|
|
out.data[i + 2] = 255;
|
|
out.data[i + 3] = 255;
|
|
}
|
|
// Copy source pixels
|
|
for (let y = 0; y < src.height; y++) {
|
|
for (let x = 0; x < src.width; x++) {
|
|
const srcIdx = (y * src.width + x) * 4;
|
|
const dstIdx = (y * width + x) * 4;
|
|
out.data[dstIdx] = src.data[srcIdx]!;
|
|
out.data[dstIdx + 1] = src.data[srcIdx + 1]!;
|
|
out.data[dstIdx + 2] = src.data[srcIdx + 2]!;
|
|
out.data[dstIdx + 3] = src.data[srcIdx + 3]!;
|
|
}
|
|
}
|
|
return PNG.sync.write(out);
|
|
};
|
|
|
|
const aPadded = PNG.sync.read(padded(angularPng));
|
|
const rPadded = PNG.sync.read(padded(reactPng));
|
|
const diffPng = new PNG({ width, height });
|
|
|
|
const mismatchCount = pixelmatch(
|
|
aPadded.data,
|
|
rPadded.data,
|
|
diffPng.data,
|
|
width,
|
|
height,
|
|
{ threshold: 0.1, alpha: 0.3 },
|
|
);
|
|
|
|
return { diffPng, mismatchCount, totalPixels: width * height, width, height };
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main
|
|
// ---------------------------------------------------------------------------
|
|
|
|
async function main() {
|
|
mkdirSync(OUTPUT_DIR, { recursive: true });
|
|
|
|
const browser = await chromium.launch({ headless: true });
|
|
const angularCtx = await browser.newContext({ viewport: VIEWPORT });
|
|
const reactCtx = await browser.newContext({ viewport: VIEWPORT });
|
|
const angularPage = await angularCtx.newPage();
|
|
const reactPage = await reactCtx.newPage();
|
|
|
|
// Mock API endpoints for both apps (WAF blocks real API in dev)
|
|
await mockAngularAPIs(angularPage);
|
|
await mockAngularAPIs(reactPage);
|
|
|
|
// Override popular requests mock for React (React uses different field names)
|
|
await reactPage.route("**/Requests/*/getpopular", (route) => {
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify([
|
|
{ mode: "FlightNumber", carrier: "SU", flightNumber: "0654", type: "Onlineboard" },
|
|
{ mode: "Route", departure: "LED", arrival: "KRR", type: "Onlineboard" },
|
|
{ mode: "Route", departure: "VKO", arrival: "KUF", type: "Onlineboard" },
|
|
{ mode: "Arrival", arrival: "VKO", type: "Onlineboard" },
|
|
]),
|
|
});
|
|
});
|
|
|
|
const results: Array<{
|
|
name: string;
|
|
mismatchPct: string;
|
|
mismatchCount: number;
|
|
totalPixels: number;
|
|
heightDiff: number;
|
|
error?: string;
|
|
}> = [];
|
|
|
|
for (const route of ROUTES) {
|
|
const routeDir = join(OUTPUT_DIR, route.name);
|
|
mkdirSync(routeDir, { recursive: true });
|
|
const waitMs = route.waitMs ?? SETTLE_MS;
|
|
const fullPage = route.fullPage !== false;
|
|
|
|
console.log(`\n📸 ${route.name}`);
|
|
console.log(` Angular: ${ANGULAR_BASE}${route.angular}`);
|
|
console.log(` React: ${REACT_BASE}${route.react}`);
|
|
|
|
try {
|
|
const [angularBuf, reactBuf] = await Promise.all([
|
|
captureScreenshot(angularPage, `${ANGULAR_BASE}${route.angular}`, waitMs, fullPage),
|
|
captureScreenshot(reactPage, `${REACT_BASE}${route.react}`, waitMs, fullPage),
|
|
]);
|
|
|
|
writeFileSync(join(routeDir, "angular.png"), angularBuf);
|
|
writeFileSync(join(routeDir, "react.png"), reactBuf);
|
|
|
|
const { diffPng, mismatchCount, totalPixels, width, height } = alignAndDiff(angularBuf, reactBuf);
|
|
const diffBuf = PNG.sync.write(diffPng);
|
|
writeFileSync(join(routeDir, "diff.png"), diffBuf);
|
|
|
|
const angularPng = PNG.sync.read(angularBuf);
|
|
const reactPng = PNG.sync.read(reactBuf);
|
|
const heightDiff = reactPng.height - angularPng.height;
|
|
const mismatchPct = ((mismatchCount / totalPixels) * 100).toFixed(2);
|
|
|
|
results.push({ name: route.name, mismatchPct, mismatchCount, totalPixels, heightDiff });
|
|
console.log(` ✅ ${mismatchPct}% diff (${mismatchCount.toLocaleString()} px), height Δ=${heightDiff}px`);
|
|
} catch (err) {
|
|
const msg = err instanceof Error ? err.message : String(err);
|
|
results.push({ name: route.name, mismatchPct: "ERR", mismatchCount: -1, totalPixels: -1, heightDiff: 0, error: msg });
|
|
console.log(` ❌ Error: ${msg}`);
|
|
}
|
|
}
|
|
|
|
// Summary
|
|
console.log("\n" + "=".repeat(70));
|
|
console.log("VISUAL PARITY SUMMARY");
|
|
console.log("=".repeat(70));
|
|
console.log(
|
|
"Page".padEnd(30) +
|
|
"Diff %".padEnd(10) +
|
|
"Mismatch px".padEnd(15) +
|
|
"Height Δ".padEnd(12) +
|
|
"Status",
|
|
);
|
|
console.log("-".repeat(70));
|
|
for (const r of results) {
|
|
const status = r.error ? `❌ ${r.error.slice(0, 30)}` : Number(r.mismatchPct) < 0.5 ? "✅ PASS" : "⚠️ DIFF";
|
|
console.log(
|
|
r.name.padEnd(30) +
|
|
r.mismatchPct.padEnd(10) +
|
|
(r.mismatchCount >= 0 ? r.mismatchCount.toLocaleString() : "N/A").padEnd(15) +
|
|
`${r.heightDiff}px`.padEnd(12) +
|
|
status,
|
|
);
|
|
}
|
|
console.log("=".repeat(70));
|
|
|
|
// Write JSON report
|
|
writeFileSync(
|
|
join(OUTPUT_DIR, "report.json"),
|
|
JSON.stringify({ timestamp: new Date().toISOString(), viewport: VIEWPORT, results }, null, 2),
|
|
);
|
|
console.log(`\nReport: ${join(OUTPUT_DIR, "report.json")}`);
|
|
console.log(`Screenshots: ${OUTPUT_DIR}/`);
|
|
|
|
await browser.close();
|
|
}
|
|
|
|
main().catch((err) => {
|
|
console.error(err);
|
|
process.exit(1);
|
|
});
|