89 lines
4.3 KiB
JavaScript
89 lines
4.3 KiB
JavaScript
|
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();
|
||
|
|
}
|