From 214d8a4cb04985cd393f8eba726c5b2832e7c379 Mon Sep 17 00:00:00 2001 From: Developer Date: Tue, 16 Jun 2026 17:13:43 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E5=AE=9E=E6=88=98=E6=95=99=E8=AE=AD=E7=AB=A0?= =?UTF-8?q?=E8=8A=82=EF=BC=88=E4=BB=8EAI=E7=94=9F=E6=88=90=E6=8C=89?= =?UTF-8?q?=E9=92=AEbug=E4=B8=AD=E6=80=BB=E7=BB=93=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增第六章「实战教训」: - 「看见不等于测了」陷阱（B07案例分析） - 弹窗测试的「红按钮」规则 - 「测试时绕过=上线时爆炸」警示 - 自我检查Checklist（3个问题） Co-Authored-By: Claude Opus 4.8 --- docs/tests/playwright-test-template.md | 78 +++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/docs/tests/playwright-test-template.md b/docs/tests/playwright-test-template.md index 1de773d..0421556 100644 --- a/docs/tests/playwright-test-template.md +++ b/docs/tests/playwright-test-template.md @@ -204,7 +204,83 @@ Step 3: Healer 验证 --- -## 六、常用通用方法 +## 六、实战教训 —— 从 AI 生成按钮 bug 中学到的 + +### 6.1 「看见不等于测了」—— 最常见的测试陷阱 + +**案例**：题库管理的 AI 生成弹窗测试（B07）： + +```typescript +// ❌ 错误的写法：只检查了按钮可见就点取消了 +test('AI生成弹窗交互', async ({ page }) => { + const genBtn = page.locator('button').filter({ hasText: /生成/ }).first(); + await expect(genBtn).toBeVisible({ timeout: 3000 }); // ← 看见了 + const cancelBtn = page.locator('button').filter({ hasText: /取消/ }).first(); + await cancelBtn.click(); // ← 没点生成直接关闭 + // 结果：没发现 knowledgeBaseContent 传了空字符串导致后端 400 +}); +``` + +**规则：每个「确认/提交/保存/生成」按钮必须至少被实际点击一次。** + +### 6.2 弹窗/抽屉测试的「红按钮」规则 + +| 弹窗中的按钮 | 必须测？ | 为什么 | +|:------------|:--------:|--------| +| **红按钮（提交/保存/生成/删除）** | **✅ 必须点** | 不点发现不了传参错误、校验失败、后端 500 | +| 灰按钮（取消/关闭/X） | 可选 | 主要测 UI 渲染 | +| 输入框/下拉 | ✅ 必须填 | 不填不知道表单绑定是否正确 | + +### 6.3 「测试时绕过」= 「上线时爆炸」 + +我们当初故意绕过 AI 生成的点击，理由是「怕 AI 调用太慢」。结果是： + +``` +测试绕过 → 前端传空字符串 → 后端 400 → 用户报错 + ↑ 如果测试点了「生成」按钮，立即就能发现 +``` + +**解决方案**： +- UI 测试只验证**弹窗打开 + 参数已填充 + 按钮可点击**（不等待 AI 返回） +- API 测试单独覆盖**实际后端调用是否正确**（短 timeout） +- 两者结合既不卡 UI 测试，又不遗漏后端验证 + +```typescript +// ✅ 正确的做法：UI 测弹窗交互，API 测后端逻辑 +// UI 测试 +test('弹窗交互', async ({ page }) => { + await aiBtn.click(); + await expect(genBtn).toBeVisible(); + // 验证内容已填充（不是空的） + const countInput = page.locator('input[type="number"]'); + await expect(countInput).toBeVisible(); + // 点取消关闭，不等待 AI 返回 + await cancelBtn.click(); +}); + +// API 测试（单独） +test('API 调用验证', async () => { + const gen = await fetch(`/api/xxx/generate`, { body: JSON.stringify({ count: 1, content }) }); + expect(gen.status).toBe(201); +}); +``` + +### 6.4 Checklist 自我检查 + +写完测试后问自己三个问题： + +``` +□ 每个「提交/保存/生成/删除」按钮都被实际点击过吗？ + → 不只是检查 visible/enabled，是真正调用了 click() +□ 弹窗/抽屉关闭前，表单里的关键输入框都被填充验证过吗？ + → 不只是打开看了一眼 +□ 被测试绕过的「太慢/太难测」路径，有没有 API 测试兜底？ + → UI 跳过的地方，API 必须补上 +``` + +--- + +## 七、常用通用方法 ```typescript // 通用按钮点击