282 lines
13 KiB
TypeScript
282 lines
13 KiB
TypeScript
// @ts-nocheck -- standalone evidence runner executed directly with tsx.
|
|
import { createRequire } from "node:module";
|
|
import { mkdir, writeFile } from "node:fs/promises";
|
|
import { resolve } from "node:path";
|
|
|
|
import { chromium } from "@playwright/test";
|
|
|
|
import {
|
|
TECH_LOG_BREAKPOINT_WIDTHS,
|
|
TECH_LOG_CANONICAL_ROUTES,
|
|
TECH_LOG_FIXED_TIME,
|
|
TECH_LOG_STUDIO_STATE_PATHS,
|
|
TECH_LOG_UNKNOWN_PUBLIC_PATHS,
|
|
} from "./tech-log-fixtures.ts";
|
|
|
|
const require = createRequire(import.meta.url);
|
|
const { PNG } = require(
|
|
resolve("node_modules/.pnpm/playwright-core@1.62.0/node_modules/playwright-core/lib/utilsBundle.js"),
|
|
);
|
|
|
|
const sourceBaseUrl = process.env.TECH_LOG_SOURCE_URL ?? "http://127.0.0.1:4175";
|
|
const targetBaseUrl = process.env.TECH_LOG_TARGET_URL ?? "http://127.0.0.1:4174";
|
|
const outputPath = process.env.TECH_LOG_PARITY_OUTPUT ?? "artifacts/quality/tech-log-source-parity.json";
|
|
const fixedDate = new Date(TECH_LOG_FIXED_TIME);
|
|
const noMotionCss = `
|
|
*, *::before, *::after {
|
|
animation-delay: 0s !important;
|
|
animation-duration: 0s !important;
|
|
caret-color: transparent !important;
|
|
transition-delay: 0s !important;
|
|
transition-duration: 0s !important;
|
|
}
|
|
`;
|
|
|
|
const allCases = [
|
|
...TECH_LOG_CANONICAL_ROUTES.flatMap(({ routeId, path }) =>
|
|
[360, 1440].map((width) => ({ name: `${routeId}-${width}`, path, width }))),
|
|
...TECH_LOG_BREAKPOINT_WIDTHS.map((width) => ({
|
|
name: `TECH_LOG_HOME-BREAKPOINT-${width}`,
|
|
path: "/",
|
|
width,
|
|
})),
|
|
...TECH_LOG_STUDIO_STATE_PATHS.map(([state, path]) => ({
|
|
name: `TECH_LOG_STUDIO_STATE-${state}`,
|
|
path,
|
|
width: 1440,
|
|
})),
|
|
...TECH_LOG_UNKNOWN_PUBLIC_PATHS.flatMap(([route, path]) =>
|
|
[360, 1440].map((width) => ({
|
|
name: `TECH_LOG_UNKNOWN_${route.toUpperCase().replaceAll("-", "_")}-${width}`,
|
|
path,
|
|
width,
|
|
}))),
|
|
{ name: "TECH_LOG_SEARCH_DIALOG", path: "/", width: 390, action: "search-dialog" },
|
|
{ name: "TECH_LOG_STUDIO_MOBILE_MENU", path: "/studio", width: 390, action: "studio-menu" },
|
|
{
|
|
name: "TECH_LOG_STUDIO_IMMEDIATE_PREVIEW",
|
|
path: "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
|
|
width: 1440,
|
|
action: "immediate-preview",
|
|
},
|
|
{
|
|
name: "TECH_LOG_STUDIO_DIRTY_DIALOG",
|
|
path: "/studio/documents/11111111-1111-4111-8111-111111111111/edit",
|
|
width: 1440,
|
|
action: "dirty-dialog",
|
|
},
|
|
{
|
|
name: "TECH_LOG_STUDIO_CURRENT_PREVIEW_CREATED",
|
|
path: "/studio/documents/11111111-1111-4111-8111-111111111113/preview",
|
|
width: 1440,
|
|
action: "create-preview",
|
|
},
|
|
{
|
|
name: "TECH_LOG_STUDIO_UNPUBLISH_DIALOG",
|
|
path: "/studio/publications",
|
|
width: 1440,
|
|
action: "unpublish-dialog",
|
|
},
|
|
{
|
|
name: "TECH_LOG_STUDIO_WARNING_ACKNOWLEDGED",
|
|
path: "/studio/documents/11111111-1111-4111-8111-111111111116/validation",
|
|
width: 1440,
|
|
action: "warning-acknowledged",
|
|
},
|
|
];
|
|
const caseFilter = process.env.TECH_LOG_PARITY_CASE;
|
|
const cases = caseFilter
|
|
? allCases.filter(({ name }) => name.includes(caseFilter))
|
|
: allCases;
|
|
const diagnosticDirectory = process.env.TECH_LOG_PARITY_DIAGNOSTICS ?? "/tmp/techlog-parity-diagnostics";
|
|
|
|
async function interact(page, action) {
|
|
if (action === "search-dialog") {
|
|
await page.getByRole("button", { name: "검색 열기" }).click();
|
|
} else if (action === "studio-menu") {
|
|
await page.getByRole("button", { name: "Studio 메뉴 열기" }).click();
|
|
} else if (action === "immediate-preview") {
|
|
await page.getByRole("tab", { name: "즉시 미리보기" }).click();
|
|
} else if (action === "dirty-dialog") {
|
|
await page.getByLabel("요약").fill("저장하지 않은 시각 검증 변경");
|
|
await page.getByRole("link", { name: "게시 기록", exact: true }).first().click();
|
|
} else if (action === "create-preview") {
|
|
await page.getByRole("button", { name: "Public Preview 만들기" }).click();
|
|
await page.getByText("현재 저장 버전의 Public Preview입니다.").waitFor();
|
|
} else if (action === "unpublish-dialog") {
|
|
await page.getByRole("button", { name: /컬렉션 Fetch Join과 페이징은 왜 충돌하는가 게시 취소/ }).click();
|
|
} else if (action === "warning-acknowledged") {
|
|
await page.getByRole("button", { name: "검증하기" }).click();
|
|
await page.getByText("경고를 확인하고 Preview를 만들 수 있습니다").waitFor();
|
|
await page.getByRole("link", { name: "Public Preview 만들기" }).click();
|
|
await page.getByRole("button", { name: "Public Preview 만들기" }).click();
|
|
await page.getByText("현재 저장 버전의 Public Preview입니다.").waitFor();
|
|
await page.getByRole("link", { name: "게시 준비로 이동" }).click();
|
|
await page.getByRole("checkbox").check();
|
|
await page.getByRole("button", { name: /게시$/ }).waitFor();
|
|
}
|
|
}
|
|
|
|
async function settle(page, baseUrl, parityCase) {
|
|
await page.setViewportSize({ width: parityCase.width, height: 1000 });
|
|
await page.clock.setFixedTime(fixedDate);
|
|
await page.goto(new URL(parityCase.path, baseUrl).href, { waitUntil: "networkidle" });
|
|
await page.locator("body").waitFor({ state: "visible" });
|
|
await page.evaluate(async () => document.fonts.ready);
|
|
await page.addStyleTag({ content: noMotionCss });
|
|
await interact(page, parityCase.action);
|
|
await page.evaluate(async () => document.fonts.ready);
|
|
}
|
|
|
|
async function projection(page) {
|
|
return page.evaluate(() => {
|
|
const normalizeReference = (value) => value
|
|
.split(" ")
|
|
.map((token) => token.replace(/^_[rR].*?_(?=-|$)/, "<generated-id>"))
|
|
.join(" ");
|
|
const attributes = (element) => Object.fromEntries(
|
|
[...element.attributes]
|
|
.filter(({ name }) => name === "role" || name.startsWith("aria-"))
|
|
.map(({ name, value }) => [name, normalizeReference(value)])
|
|
.sort(([left], [right]) => left.localeCompare(right)),
|
|
);
|
|
return [...document.querySelectorAll("header, main, footer, dialog")].map((element) => ({
|
|
tag: element.tagName.toLowerCase(),
|
|
className: [...element.classList].map((name) => name.replace(/^_([A-Za-z0-9]+)_[A-Za-z0-9]+_(\d+)$/, "_$1_<generated-module>_$2")).sort().join(" "),
|
|
text: element.textContent?.replace(/\s+/g, " ").trim() ?? "",
|
|
aria: attributes(element),
|
|
descendants: [...element.querySelectorAll("[role], [aria-label], [aria-labelledby], [aria-describedby], [aria-current], [aria-expanded], [aria-controls]")]
|
|
.map((child) => ({
|
|
tag: child.tagName.toLowerCase(),
|
|
className: [...child.classList].map((name) => name.replace(/^_([A-Za-z0-9]+)_[A-Za-z0-9]+_(\d+)$/, "_$1_<generated-module>_$2")).sort().join(" "),
|
|
text: child.textContent?.replace(/\s+/g, " ").trim() ?? "",
|
|
aria: attributes(child),
|
|
})),
|
|
}));
|
|
});
|
|
}
|
|
|
|
async function layoutProjection(page) {
|
|
return page.evaluate(() => [...document.querySelectorAll("header, main, main *, footer, dialog, .studio-app *")].map((element) => {
|
|
const box = element.getBoundingClientRect();
|
|
const style = getComputedStyle(element);
|
|
return {
|
|
tag: element.tagName.toLowerCase(),
|
|
className: [...element.classList].sort().join(" "),
|
|
top: box.top,
|
|
left: box.left,
|
|
width: box.width,
|
|
height: box.height,
|
|
fontFamily: style.fontFamily,
|
|
fontSize: style.fontSize,
|
|
lineHeight: style.lineHeight,
|
|
margin: style.margin,
|
|
padding: style.padding,
|
|
};
|
|
}));
|
|
}
|
|
|
|
function pixelDifference(sourceBuffer, targetBuffer) {
|
|
const source = PNG.sync.read(sourceBuffer);
|
|
const target = PNG.sync.read(targetBuffer);
|
|
if (source.width !== target.width || source.height !== target.height) {
|
|
return { pixels: null, sourceSize: [source.width, source.height], targetSize: [target.width, target.height] };
|
|
}
|
|
let pixels = 0;
|
|
for (let offset = 0; offset < source.data.length; offset += 4) {
|
|
if (
|
|
source.data[offset] !== target.data[offset] ||
|
|
source.data[offset + 1] !== target.data[offset + 1] ||
|
|
source.data[offset + 2] !== target.data[offset + 2] ||
|
|
source.data[offset + 3] !== target.data[offset + 3]
|
|
) pixels += 1;
|
|
}
|
|
return { pixels, sourceSize: [source.width, source.height], targetSize: [target.width, target.height] };
|
|
}
|
|
|
|
const browser = await chromium.launch();
|
|
const contextOptions = {
|
|
colorScheme: "light",
|
|
deviceScaleFactor: 1,
|
|
locale: "ko-KR",
|
|
reducedMotion: "reduce",
|
|
serviceWorkers: "block",
|
|
timezoneId: "Asia/Seoul",
|
|
};
|
|
const sourceContext = await browser.newContext(contextOptions);
|
|
const targetContext = await browser.newContext(contextOptions);
|
|
const results = [];
|
|
|
|
try {
|
|
for (const parityCase of cases) {
|
|
const sourcePage = await sourceContext.newPage();
|
|
const targetPage = await targetContext.newPage();
|
|
const sourceErrors = [];
|
|
const targetErrors = [];
|
|
for (const [page, errors] of [[sourcePage, sourceErrors], [targetPage, targetErrors]]) {
|
|
page.on("console", (message) => { if (message.type() === "error") errors.push(`console: ${message.text()}`); });
|
|
page.on("pageerror", (error) => errors.push(`pageerror: ${error.message}`));
|
|
page.on("requestfailed", (request) => errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText ?? ""}`));
|
|
}
|
|
await Promise.all([
|
|
settle(sourcePage, sourceBaseUrl, parityCase),
|
|
settle(targetPage, targetBaseUrl, parityCase),
|
|
]);
|
|
const [sourceShot, targetShot, sourceDom, targetDom, sourceLayout, targetLayout, sourceFonts, targetFonts] = await Promise.all([
|
|
sourcePage.screenshot({ fullPage: true }),
|
|
targetPage.screenshot({ fullPage: true }),
|
|
projection(sourcePage),
|
|
projection(targetPage),
|
|
layoutProjection(sourcePage),
|
|
layoutProjection(targetPage),
|
|
sourcePage.evaluate(() => [...document.fonts].map(({ family, status }) => ({ family, status })).filter(({ family }) => /Pretendard|IBM Plex Mono/.test(family))),
|
|
targetPage.evaluate(() => [...document.fonts].map(({ family, status }) => ({ family, status })).filter(({ family }) => /Pretendard|IBM Plex Mono/.test(family))),
|
|
]);
|
|
const pixel = pixelDifference(sourceShot, targetShot);
|
|
const domEqual = JSON.stringify(sourceDom) === JSON.stringify(targetDom);
|
|
const fontsEqual = JSON.stringify(sourceFonts) === JSON.stringify(targetFonts);
|
|
const isPlainNotFound =
|
|
parityCase.name.includes("NOT_FOUND") || parityCase.name.includes("UNKNOWN");
|
|
const expectsSourceNotFoundResponse =
|
|
isPlainNotFound || parityCase.path.includes("unknown");
|
|
const expectedNotFoundConsole = expectsSourceNotFoundResponse
|
|
? (message) => message === "console: Failed to load resource: the server responded with a status of 404 (Not Found)"
|
|
: () => false;
|
|
const unexplainedSourceErrors = sourceErrors.filter((message) => !expectedNotFoundConsole(message));
|
|
const unexplainedTargetErrors = targetErrors.filter((message) => !expectedNotFoundConsole(message));
|
|
const fontContractApplies = !isPlainNotFound;
|
|
const passed = pixel.pixels === 0 && domEqual && (!fontContractApplies || fontsEqual) && unexplainedSourceErrors.length === 0 && unexplainedTargetErrors.length === 0;
|
|
if (!passed) {
|
|
await mkdir(diagnosticDirectory, { recursive: true });
|
|
const stem = parityCase.name.toLowerCase().replace(/[^a-z0-9-]+/g, "-");
|
|
await Promise.all([
|
|
writeFile(resolve(diagnosticDirectory, `${stem}-source.png`), sourceShot),
|
|
writeFile(resolve(diagnosticDirectory, `${stem}-target.png`), targetShot),
|
|
writeFile(resolve(diagnosticDirectory, `${stem}-dom.json`), `${JSON.stringify({ sourceDom, targetDom, sourceLayout, targetLayout }, null, 2)}\n`),
|
|
]);
|
|
}
|
|
results.push({ name: parityCase.name, path: parityCase.path, width: parityCase.width, action: parityCase.action ?? null, pixel, domEqual, fontsEqual, fontContractApplies, sourceFonts, targetFonts, sourceErrors, targetErrors, unexplainedSourceErrors, unexplainedTargetErrors, passed });
|
|
console.log(`${passed ? "PASS" : "FAIL"} ${parityCase.name} pixels=${pixel.pixels ?? "SIZE"} dom=${domEqual} fonts=${fontContractApplies ? fontsEqual : "source-plain-text"} errors=${unexplainedSourceErrors.length}/${unexplainedTargetErrors.length}`);
|
|
await Promise.all([sourcePage.close(), targetPage.close()]);
|
|
}
|
|
} finally {
|
|
await Promise.all([sourceContext.close(), targetContext.close()]);
|
|
await browser.close();
|
|
}
|
|
|
|
const evidence = {
|
|
generatedAt: new Date().toISOString(),
|
|
sourceBaseUrl,
|
|
targetBaseUrl,
|
|
conditions: { ...contextOptions, fixedTime: TECH_LOG_FIXED_TIME, viewportHeight: 1000, screenshots: "fullPage", masks: 0 },
|
|
total: results.length,
|
|
passed: results.filter((result) => result.passed).length,
|
|
failed: results.filter((result) => !result.passed).length,
|
|
totalDifferentPixels: results.reduce((sum, result) => sum + (result.pixel.pixels ?? 0), 0),
|
|
results,
|
|
};
|
|
await mkdir(resolve(outputPath, ".."), { recursive: true });
|
|
await writeFile(outputPath, `${JSON.stringify(evidence, null, 2)}\n`);
|
|
console.log(JSON.stringify({ outputPath, total: evidence.total, passed: evidence.passed, failed: evidence.failed, totalDifferentPixels: evidence.totalDifferentPixels }));
|
|
if (evidence.failed > 0) process.exitCode = 1;
|