From 6c047cdc201d0a5920be58c588b7ab3a9b4a02ab Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Thu, 27 Aug 2026 23:22:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(e2e):=20=E7=B4=A0=E6=9D=90=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E7=82=B9=E5=87=BB=E5=91=BD=E4=B8=AD=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=AF=BC=E8=87=B4=E9=80=89=E4=B8=AD=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：Playwright 默认点击卡片中心（150px 宽卡片中心约 x=55,y=100），
正好命中 36×36 播放按钮。播放按钮 stopPropagation 只切换视频播放，
不会触发 onToggle 选中，因此勾选标记 ✓ 永远不出现，E2E 5s 超时失败。

修复：
- MaterialCard 勾选标记加 data-testid=material-card-check，卡片加 data-testid=material-card
- E2E 用 testid 定位卡片，点击左上角 (15,15) 避开播放按钮
- 勾选标记断言改用 testid，避免 ✓ 字符文本匹配不稳定
---
 apps/web/e2e/core-generation.spec.ts                     | 9 +++++----
 .../generate/components/material/ManualMaterialList.tsx  | 3 +++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/e2e/core-generation.spec.ts b/apps/web/e2e/core-generation.spec.ts
index cb2fd867e..da3dec340 100755
--- a/apps/web/e2e/core-generation.spec.ts
+++ b/apps/web/e2e/core-generation.spec.ts
@@ -190,11 +190,12 @@ test.describe("Core generation flow", () => {
     const librarySelect = page.locator("select").first()
     await librarySelect.selectOption({ label: libraryName })
     // 新 UI: 素材以 9:16 竖屏卡片展示，点击卡片选中
-    const materialCard = page.getByText(sourceFileName).locator("..")
+    // 注意：卡片中心是播放按钮（stopPropagation 会阻止选中），所以点击左上角避开
+    const materialCard = page.getByTestId("material-card").filter({ hasText: sourceFileName })
     await expect(materialCard).toBeVisible({ timeout: 10_000 })
-    await materialCard.click()
-    // 验证选中：卡片应出现勾选标记 ✓
-    await expect(materialCard.getByText("✓")).toBeVisible({ timeout: 5_000 })
+    await materialCard.click({ position: { x: 15, y: 15 } })
+    // 验证选中：卡片应出现勾选标记（用 testid 定位，避免 ✓ 字符文本匹配不稳定）
+    await expect(materialCard.getByTestId("material-card-check")).toBeVisible({ timeout: 5_000 })
     await page.getByRole("button", { name: "下一步" }).click()
 
     // Step 3: voice (可选步骤，新注册用户无配音素材，直接跳过)
diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 240f4cffd..1baed4ddb 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -70,6 +70,7 @@ const MaterialCard: React.FC<{
 
   return (
     <div
+      data-testid="material-card"
       onClick={handleCardClick}
       style={{
         position: "relative",
@@ -216,6 +217,8 @@ const MaterialCard: React.FC<{
       {/* 选中勾选标记（左上角） */}
       {checked && (
         <div
+          data-testid="material-card-check"
+          aria-label="已选中"
           style={{
             position: "absolute",
             top: 6,