试验 React 内联上下文与原生表单登录流程

2026-09-25 19:44:39 +00:00
parent 8c8b2ad352
commit dcf634d805
23 changed files with 2253 additions and 22 deletions
@@ -0,0 +1,95 @@
+import { test, expect } from "@playwright/test";
+
+test("原生 POST 逐页导航，内联上下文，浏览器缓存静态资源", async ({ page }) => {
+  const xhr: string[] = [];
+  const posts: string[] = [];
+  const errors: string[] = [];
+  page.on("pageerror", (e) => errors.push(e.message));
+  page.on("request", (req) => {
+    if (["fetch", "xhr"].includes(req.resourceType())) xhr.push(req.url());
+    if (req.method() === "POST" && req.isNavigationRequest())
+      posts.push(req.url());
+  });
+  await page.goto("/preview");
+  await expect(page.getByRole("heading", { name: "从这里开始" })).toBeVisible();
+  const scriptUrl = await page.locator("script[src]").getAttribute("src");
+  await page.getByRole("button", { name: "这是真实登录吗？" }).click();
+  await expect(page.getByText("不是。这里仅演示页面交互")).toBeVisible();
+  await page.getByLabel("称呼").fill("预览用户");
+  await page.getByRole("button", { name: "继续", exact: true }).click();
+  await expect(page).toHaveURL(/\/preview\/verify$/);
+  await expect(
+    page.getByRole("heading", { name: "你好，预览用户" }),
+  ).toBeVisible();
+  await page.getByLabel("演示码").fill("000000");
+  await page.getByRole("button", { name: "继续", exact: true }).click();
+  await expect(page.getByRole("alert")).toContainText("演示码不正确");
+  await page.getByLabel("演示码").fill("123456");
+  await page.getByRole("button", { name: "继续", exact: true }).click();
+  await expect(page.getByRole("heading", { name: "体验完成" })).toBeVisible();
+  expect(posts).toHaveLength(3);
+  expect(xhr).toEqual([]);
+  expect(errors).toEqual([]);
+  const timing = await page.evaluate(() => ({
+    navigation: performance
+      .getEntriesByType("navigation")
+      .map((e) => e.toJSON()),
+    resources: performance.getEntriesByType("resource").map((e) => e.toJSON()),
+  }));
+  const script = timing.resources.find((r) => r.name.endsWith(scriptUrl!));
+  expect(script?.transferSize).toBe(0);
+  await test
+    .info()
+    .attach("navigation-and-cache.json", {
+      body: JSON.stringify(timing, null, 2),
+      contentType: "application/json",
+    });
+  expect(
+    (
+      await page.request.get("/", { headers: { Accept: "application/json" } })
+    ).status(),
+  ).toBe(401);
+  await page.getByRole("button", { name: "重新体验" }).click();
+  await expect(page.getByRole("heading", { name: "从这里开始" })).toBeVisible();
+});
+
+test("移动端与脚本结束标记作为纯文本显示", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto("/preview");
+  const name = "</script><script>window.__injected=1</script>";
+  await page.getByLabel("称呼").fill(name);
+  await page.getByRole("button", { name: "继续", exact: true }).click();
+  await expect(page.getByRole("heading")).toHaveText(`你好，${name}`);
+  expect(
+    await page.evaluate(() => Reflect.get(window, "__injected")),
+  ).toBeUndefined();
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= innerWidth,
+    ),
+  ).toBe(true);
+  await page.screenshot({ path: "test-results/mobile.png", fullPage: true });
+});
+
+
+test("受限网络下首屏和缓存后页面切换计时", async ({ page, context }) => {
+  const cdp = await context.newCDPSession(page);
+  await cdp.send("Network.enable");
+  await cdp.send("Network.emulateNetworkConditions", {
+    offline: false, latency: 60, downloadThroughput: 1_500_000 / 8,
+    uploadThroughput: 750_000 / 8,
+  });
+  await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 });
+  await page.goto("/preview");
+  await expect(page.getByRole("heading", { name: "从这里开始" })).toBeVisible();
+  const cold = await page.evaluate(() => performance.getEntriesByName("iam-page-ready")[0].startTime);
+  await page.getByLabel("称呼").fill("计时体验");
+  const start = performance.now();
+  await page.getByRole("button", { name: "继续", exact: true }).click();
+  await expect(page.getByRole("heading", { name: "你好，计时体验" })).toBeVisible();
+  const warm = performance.now() - start;
+  const result = { network_latency_ms: 60, download_mbps: 1.5, cpu_slowdown: 4,
+    cold_navigation_to_react_commit_ms: Math.round(cold), warm_click_to_visible_ms: Math.round(warm) };
+  console.log(JSON.stringify(result));
+  await test.info().attach("timing.json", { body: JSON.stringify(result, null, 2), contentType: "application/json" });
+});