story/test/e2e/visual-workspace-navigation.mjs

import { createRequire } from "node:module";
import { mkdir } from "node:fs/promises";
import { fileURLToPath } from "node:url";

const require = createRequire(process.env.PLAYWRIGHT_REQUIRE_FROM ?? import.meta.url);
const { chromium } = require("playwright");
const outputDirectory = new URL("./screenshots/", import.meta.url);
const webURL = process.env.VISUAL_WEB_URL ?? "http://localhost:3100";
const webHostPattern = new RegExp(new URL(webURL).host.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
const oidcURLPattern = new RegExp(process.env.VISUAL_OIDC_URL_PATTERN ?? "localhost:58180");
const username = process.env.VISUAL_USERNAME ?? "owner";
const password = process.env.VISUAL_PASSWORD ?? "LocalOnly123!";
await mkdir(outputDirectory, { recursive: true });

const browser = await chromium.launch({ headless: true, executablePath: process.env.CHROME_PATH ?? "C:/Program Files/Google/Chrome/Application/chrome.exe" });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
const consoleErrors = [];
const failedRequests = [];
const rateLimitedResponses = [];
page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
page.on("response", (response) => { if (response.status() === 429) rateLimitedResponses.push(response.url()); });
page.on("requestfailed", (request) => {
  const failure = request.failure()?.errorText ?? "failed";
  const requestURL = new URL(request.url());
  if (request.method() === "GET" && requestURL.pathname === "/api/v1/events" && failure.includes("ERR_ABORTED")) return;
  if (requestURL.pathname.startsWith("/api/v1/") && failure.includes("ERR_ABORTED")) return;
  failedRequests.push(`${request.method()} ${request.url()} ${failure}`);
});

try {
  await page.goto(webURL, { waitUntil: "networkidle" });
  await page.getByRole("button", { name: "登录研发环境" }).click();
  await page.waitForURL(oidcURLPattern);
  await page.locator("#username").fill(username);
  await page.locator("#password").fill(password);
  await page.locator("#kc-login").click();
  await page.waitForURL(webHostPattern, { timeout: 15000 });
  await page.getByRole("heading", { name: "家庭业务工作台" }).waitFor();

  await page.getByRole("button", { name: /运行配置/ }).click();
  await page.getByRole("heading", { name: "配置发布与版本控制" }).waitFor();
  await page.waitForTimeout(400);
  const configURLSelected = new URL(page.url()).searchParams.get("workspace") === "config";
  await page.reload({ waitUntil: "domcontentloaded" });
  await page.getByRole("heading", { name: "配置发布与版本控制" }).waitFor({ timeout: 15000 });
  await page.waitForTimeout(400);
  const configRestoredAfterReload = new URL(page.url()).searchParams.get("workspace") === "config";

  await page.getByRole("button", { name: /费用额度/ }).click();
  await page.getByRole("heading", { name: "用量、费用与额度" }).waitFor();
  await page.waitForTimeout(400);
  const billingURLSelected = new URL(page.url()).searchParams.get("workspace") === "billing";
  await page.goBack({ waitUntil: "domcontentloaded" });
  await page.getByRole("heading", { name: "配置发布与版本控制" }).waitFor();
  await page.waitForTimeout(400);
  const backRestoredConfig = new URL(page.url()).searchParams.get("workspace") === "config";
  await page.goForward({ waitUntil: "domcontentloaded" });
  await page.getByRole("heading", { name: "用量、费用与额度" }).waitFor();
  await page.waitForTimeout(400);
  const forwardRestoredBilling = new URL(page.url()).searchParams.get("workspace") === "billing";

  await page.goto(`${webURL}/?workspace=unknown`, { waitUntil: "domcontentloaded" });
  await page.getByRole("heading", { name: "家庭业务工作台" }).waitFor();
  await page.waitForTimeout(400);
  const unknownNormalizedToFamily = new URL(page.url()).searchParams.get("workspace") === null;
  await page.goto(`${webURL}/?workspace=alerts`, { waitUntil: "domcontentloaded" });
  await page.getByRole("heading", { name: "告警监测与处置闭环" }).waitFor();
  const directAlertLinkRestored = new URL(page.url()).searchParams.get("workspace") === "alerts";
  await page.screenshot({ path: fileURLToPath(new URL("workspace-navigation-deep-link.png", outputDirectory)), fullPage: true });

  const overflow = 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}`));
  const result = { configURLSelected, configRestoredAfterReload, billingURLSelected, backRestoredConfig, forwardRestoredBilling, unknownNormalizedToFamily, directAlertLinkRestored, rateLimitedResponses, overflow, consoleErrors, failedRequests };
  console.log(JSON.stringify(result, null, 2));
  if (!configURLSelected || !configRestoredAfterReload || !billingURLSelected || !backRestoredConfig || !forwardRestoredBilling || !unknownNormalizedToFamily || !directAlertLinkRestored || rateLimitedResponses.length || overflow.length || consoleErrors.length || failedRequests.length) {
    throw new Error("Workspace navigation visual smoke failed");
  }
} finally {
  await browser.close();
}