chore: establish local platform baseline

2026-08-26 06:41:54 +08:00
commit 29bdf4900f
575 changed files with 95644 additions and 0 deletions
@@ -0,0 +1,88 @@
+import { createRequire } from "node:module";
+import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
+
+const require = createRequire(process.env.PLAYWRIGHT_REQUIRE_FROM ?? import.meta.url);
+const { chromium } = require("playwright");
+const browserName = process.env.BROWSER_NAME ?? "chrome";
+const executablePath = process.env.BROWSER_PATH;
+if (!executablePath) throw new Error("BROWSER_PATH is required");
+
+const outputDirectory = new URL(`./screenshots/compatibility/${browserName}/`, import.meta.url);
+const outputPath = decodeURIComponent(outputDirectory.pathname.replace(/^\/(.:)/, "$1"));
+await mkdir(outputPath, { recursive: true });
+
+const browser = await chromium.launch({ headless: true, executablePath });
+const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
+const consoleErrors = [];
+const failedRequests = [];
+page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
+page.on("pageerror", (error) => consoleErrors.push(`pageerror: ${error.message}`));
+page.on("requestfailed", (request) => {
+  const failure = request.failure()?.errorText ?? "failed";
+  if (request.url().includes("/api/v1/events") && failure.includes("ERR_ABORTED")) return;
+  failedRequests.push(`${request.method()} ${request.url()} ${failure}`);
+});
+
+const scanOverflow = async (label) => ({
+  label,
+  documentOverflow: await page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth + 2),
+  elements: await page.evaluate(() => [...document.querySelectorAll("body *")]
+    .filter((element) => element instanceof HTMLElement && element.scrollWidth > element.clientWidth + 2 && getComputedStyle(element).overflowX === "visible")
+    .slice(0, 20)
+    .map((element) => `${element.tagName}.${element.className}: ${element.clientWidth}/${element.scrollWidth}`)),
+});
+
+try {
+  await page.goto("http://localhost:3100", { waitUntil: "networkidle" });
+  await page.getByRole("button", { name: "登录研发环境" }).click();
+  await page.waitForURL(/localhost:58180/);
+  await page.locator("#username").fill("owner");
+  await page.locator("#password").fill("LocalOnly123!");
+  await page.locator("#kc-login").click();
+  await page.waitForURL(/^http:\/\/localhost:3100(?:\/|$)/, { timeout: 15000 });
+
+  for (const heading of ["配置发布与版本控制", "用量、费用与额度", "告警监测与处置闭环", "家庭业务工作台"]) {
+    await page.getByRole("heading", { name: heading }).waitFor({ timeout: 15000 });
+  }
+  await page.getByText("状态实时更新", { exact: true }).waitFor({ timeout: 15000 });
+
+  const checks = [];
+  checks.push(await scanOverflow("desktop-overview"));
+  const tabs = ["家庭成员", "长者与授权", "设备管理", "固件发布", "通话记录", "故事与记忆", "资源分享", "隐私请求"];
+  for (const tab of tabs) {
+    await page.getByRole("button", { name: tab, exact: true }).click();
+    await page.waitForTimeout(250);
+    checks.push(await scanOverflow(`desktop-${tab}`));
+  }
+  await page.screenshot({ path: join(outputPath, "desktop.png"), fullPage: true });
+
+  await page.setViewportSize({ width: 1024, height: 900 });
+  for (const tab of tabs) {
+    await page.getByRole("button", { name: tab, exact: true }).click();
+    await page.waitForTimeout(250);
+    checks.push(await scanOverflow(`tablet-${tab}`));
+  }
+  await page.screenshot({ path: join(outputPath, "tablet.png"), fullPage: true });
+
+  const firstContentfulPaint = await page.evaluate(() => performance.getEntriesByName("first-contentful-paint")[0]?.startTime ?? null);
+  const version = await browser.version();
+  const failures = checks.filter((item) => item.documentOverflow || item.elements.length);
+  const result = {
+    browser: browserName,
+    version,
+    firstContentfulPaintMs: firstContentfulPaint,
+    viewports: ["1440x1000", "1024x900"],
+    tabsChecked: tabs,
+    overflowFailures: failures,
+    consoleErrors,
+    failedRequests,
+    realtimeConnected: await page.getByText("状态实时更新", { exact: true }).isVisible(),
+  };
+  console.log(JSON.stringify(result, null, 2));
+  if (failures.length || consoleErrors.length || failedRequests.length || !result.realtimeConnected || firstContentfulPaint === null || firstContentfulPaint >= 3000) {
+    throw new Error("Browser compatibility gate failed");
+  }
+} finally {
+  await browser.close();
+}