R97 B6 补充高频页面视觉回归证据

client/tests/e2e/r92-mobile-invoice-usability.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type Page, type Route } from "@playwright/test";
+import { expect, test, type Page, type Route, type TestInfo } from "@playwright/test";
 
 import { ADMIN } from "./helpers/auth";
 import { TEST_IDS } from "./helpers/testIds";
@@ -15,6 +15,13 @@ async function fulfillJson(route: Route, data: unknown) {
   });
 }
 
+async function attachScreenshot(page: Page, testInfo: TestInfo, name: string) {
+  await testInfo.attach(name, {
+    body: await page.screenshot({ fullPage: true }),
+    contentType: "image/png",
+  });
+}
+
 async function mockAuthenticatedShell(page: Page) {
   await page.route((url) => url.pathname === "/api/auth/sso/providers", (route) => fulfillJson(route, []));
   await page.route((url) => url.pathname === "/api/auth/wecom/config", (route) =>
@@ -289,7 +296,7 @@ test.describe("R92 手机端票据与报销可用性", () => {
     await mockReimbursements(page);
   });
 
-  test("报销草稿在手机视口使用卡片并暴露继续编辑入口", async ({ page }) => {
+  test("报销草稿在手机视口使用卡片并暴露继续编辑入口", async ({ page }, testInfo) => {
     await loginThenUseMobileViewport(page);
     await page.goto("/reimbursements?status=draft&scope=own");
 
@@ -302,9 +309,11 @@ test.describe("R92 手机端票据与报销可用性", () => {
     const box = await editLink.boundingBox();
     expect(box).not.toBeNull();
     expect((box?.x ?? 0) + (box?.width ?? 0)).toBeLessThanOrEqual(390);
+
+    await attachScreenshot(page, testInfo, "r97-reimbursements-mobile-draft.png");
   });
 
-  test("票据中心手机视口可批量选择并顺序上传", async ({ page }) => {
+  test("票据中心手机视口可批量选择并顺序上传", async ({ page }, testInfo) => {
     const uploadCounter = { value: 0 };
     await mockInvoicePool(page, uploadCounter);
     await loginThenUseMobileViewport(page);
@@ -312,6 +321,10 @@ test.describe("R92 手机端票据与报销可用性", () => {
 
     await expect(page.getByTestId("invoice-mobile-row")).toBeVisible();
     await expect(page.getByTestId("invoice-pool-table")).toBeHidden();
+    await page.getByTestId("invoice-mobile-detail-button").click();
+    await expect(page.getByTestId("invoice-detail-panel")).toBeVisible();
+    await expect(page.getByText("票据详情")).toBeVisible();
+    await attachScreenshot(page, testInfo, "r97-invoice-pool-mobile.png");
 
     await page.getByTestId("invoice-upload-file").setInputFiles([
       { name: "invoice-a.pdf", mimeType: "application/pdf", buffer: Buffer.from("%PDF-a") },
@@ -323,7 +336,7 @@ test.describe("R92 手机端票据与报销可用性", () => {
     await expect.poll(() => uploadCounter.value).toBe(2);
   });
 
-  test("手机票据上传页支持一次选择多张并逐张上传", async ({ page }) => {
+  test("手机票据上传页支持一次选择多张并逐张上传", async ({ page }, testInfo) => {
     const uploadCounter = { value: 0 };
     await mockInvoicePool(page, uploadCounter);
     await loginThenUseMobileViewport(page);
@@ -334,6 +347,7 @@ test.describe("R92 手机端票据与报销可用性", () => {
       { name: "mobile-b.jpg", mimeType: "image/jpeg", buffer: Buffer.from("mobile-b") },
     ]);
     await expect(page.getByText("已选择 2 个")).toBeVisible();
+    await attachScreenshot(page, testInfo, "r97-mobile-capture-multi-upload.png");
     await page.getByTestId("mobile-capture-upload").click();
 
     await expect.poll(() => uploadCounter.value).toBe(2);