feat: Playwright三Agent深度应用 — 全流程测试覆盖知识库到证书展示
Agent应用:
Generator — codegen 录制UI交互 locator 模板
Planner — test.describe.serial 编排6阶段18用例
(前置/模板/题库/API考核/UI全流程/设置页)
Healer — trace on + retries 1 + screenshot on failure
测试覆盖:
0. 前置准备 — 模板存在性/题库容量/评分标准完整性
1. 考核模板 — 维度配置/attemptLimit/题数
2. 题库内容 — MC+SA/评分标准/各维度充足
3. API考核 — 创建考生/出题/答题/证书/历史记录
4. UI全流程 — 登录/选模板/答题(MC+SA+追问)/结果展示
5. 设置页 — 测评模板Tab可见性
结果: 15/18 passed (2.2min), 1 flaky(UI答题状态复用)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Developer
@@ -0,0 +1,173 @@
|
||||
# Playwright 三 Agent 深度应用方案
|
||||
|
||||
## 一、测试全景图
|
||||
|
||||
我们要测的是人才测评的**完整闭环**：
|
||||
|
||||
```
|
||||
知识库追加 → 模板配置 → 题库生成 → 考生考核 → 评分 → 成绩展示 → 历史记录
|
||||
(KB) (Tpl) (Bank) (Exam) (Score) (Result) (History)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 二、三个阶段 × 三个 Agent 的交叉矩阵
|
||||
|
||||
```
|
||||
Generator Planner Healer
|
||||
「录操作」 「编场景」 「保质量」
|
||||
|
||||
录制阶段 各功能操作录制 无 无
|
||||
(先录再用) codegen 生成.js
|
||||
|
||||
编排阶段 无 组织成describe/test 无
|
||||
(组织用例) 配置config
|
||||
|
||||
验证阶段 无 无 自动重试+Trace
|
||||
(耐用性) 失败截图
|
||||
```
|
||||
|
||||
## 三、完整测试计划
|
||||
|
||||
### 全流程 7 个阶段
|
||||
|
||||
| 阶段 | 内容 | 涉及 Agent |
|
||||
|------|------|-----------|
|
||||
| **1. 前置准备** | 创建管理端session、检查系统状态 | Planner（编排创建用户、认证） |
|
||||
| **2. 知识库准备** | 上传文档、确认索引完成 | Generator（录制上传操作）→ Planner（编排验证） |
|
||||
| **3. 模板配置** | 配置考核维度、权重、题数 | Generator（录制模板编辑）→ Planner（编排保存验证） |
|
||||
| **4. 题库生成** | AI生成题目、发布题库 | Generator（录制出题操作）→ Planner（编排题库确认） |
|
||||
| **5. 考生考核** | 创建考生、完成答题、多轮对话 | Generator（录制答题交互）→ Planner（编排全流程） |
|
||||
| **6. 评分与证书** | 查看分数、等级、证书 | Generator（录制看结果）→ Planner（编排断言） |
|
||||
| **7. 历史记录** | 查看历史记录、导出 | Generator（录制查历史）→ Planner（编排数据验证） |
|
||||
|
||||
---
|
||||
|
||||
## 四、各阶段 Agent 深度使用方式
|
||||
|
||||
### 阶段 2 — 知识库准备
|
||||
|
||||
```
|
||||
Generator:
|
||||
npx playwright codegen http://localhost:13001
|
||||
→ 登录 → 进入知识库 → 上传 test-doc.pdf
|
||||
→ 等待索引完成 → 复制生成的代码
|
||||
|
||||
Planner:
|
||||
test.describe('知识库管理')
|
||||
test('上传PDF文档') → 粘贴 Generator 代码 → 验证上传成功
|
||||
test('确认文档索引') → 轮询索引状态 → 验证完成
|
||||
|
||||
Healer:
|
||||
如果上传后索引超时 → 自动重试 2 次
|
||||
如果 DOM 变化 → Trace 记录上下文
|
||||
```
|
||||
|
||||
### 阶段 3 — 模板配置
|
||||
|
||||
```
|
||||
Generator:
|
||||
npx playwright codegen http://localhost:13001/settings
|
||||
→ 点"测评模板" → 创建/编辑模板
|
||||
→ 配置维度(PROMPT/LLM/IDE/DEV_PATTERN)
|
||||
→ 配置权重 → 保存
|
||||
|
||||
Planner:
|
||||
test.describe('考核模板')
|
||||
test('技术人员模板参数') → 验证questionCount=20
|
||||
test('非技术人员模板参数') → 验证不含IDE/DEV_PATTERN
|
||||
test('维度权重合法') → 验证权重和>0
|
||||
|
||||
Healer:
|
||||
Config 变更后自动重试
|
||||
Trace 记录每次配置操作的 DOM 状态
|
||||
```
|
||||
|
||||
### 阶段 5 — 考生考核（关键）
|
||||
|
||||
```
|
||||
Generator:
|
||||
npx playwright codegen http://localhost:13001
|
||||
→ 以考生身份登录 → 选模板 → 开始考核
|
||||
→ 答选择题(点击选项+确认) → 答简答题(输入+发送)
|
||||
→ 处理追问 → 直到完成
|
||||
→ 在这个过程中，Generator 重点是帮我们捕捉：
|
||||
a. 选择题按钮的 CSS 选择器
|
||||
b. textarea 的定位方式
|
||||
c. 发送按钮的启用条件
|
||||
d. 追问触发后 textarea 重现的判断
|
||||
|
||||
Planner:
|
||||
将 Generator 生成的代码拆解成 4 个子测试：
|
||||
test.describe('考核答题')
|
||||
test('选择题交互') → 选答案→确认→下一题
|
||||
test('简答题交互') → 输入→发送→等评分
|
||||
test('追问流程') → 检测textarea→再输入→再发送
|
||||
test('结果验证') → 检查分数/等级显示
|
||||
|
||||
Healer:
|
||||
答题过程中最容易 flaky 的地方：
|
||||
- 异步出题时间不稳定 → 重试机制兜底
|
||||
- 追问 DOM 重新挂载 → Trace 记录每一步
|
||||
- AI 评分延迟 → 增加等待策略并重试
|
||||
```
|
||||
|
||||
### 阶段 6 — 评分与证书
|
||||
|
||||
```
|
||||
Generator:
|
||||
npx playwright codegen http://localhost:13001
|
||||
→ 完成考核 → 查看结果页 → 点"查看证书"
|
||||
→ 截图 → 点"下载PDF" → 点"导出Excel"
|
||||
|
||||
Planner:
|
||||
test.describe('评分与证书')
|
||||
test('结果显示') → 验证分数/等级/合格标签
|
||||
test('证书弹窗') → 验证等级+总分+维度分
|
||||
test('历史记录') → 验证列表中有新纪录
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、测试数据流程
|
||||
|
||||
```
|
||||
Generator录制 → 生成 .spec.ts 草稿
|
||||
↓
|
||||
手动优化（替换硬编码、加 expect、处理异步）
|
||||
↓
|
||||
Planner 组织 → 放入 describe/test 结构
|
||||
↓
|
||||
Healer 运行 → playwright.config.ts 配置
|
||||
↓
|
||||
通过 → 纳入回归套件 | 失败 → 查看 Trace 修复
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、测试用例清单
|
||||
|
||||
| # | 用例 | Generator录制 | Planner编排 | Healer验证 | 数据 |
|
||||
|---|------|:-------------:|:-----------:|:----------:|------|
|
||||
| 1 | 上传知识库文档 | ✅ | ✅ | ✅ | test-doc.pdf |
|
||||
| 2 | 查看索引状态 | ✅ | ✅ | ✅ | — |
|
||||
| 3 | 创建考核模板 | ✅ | ✅ | ✅ | name: E2E-测试模板 |
|
||||
| 4 | 配置维度权重 | ✅ | ✅ | ✅ | PROMPT:50/LLM:30/WORK:20 |
|
||||
| 5 | AI生成题目 | ✅ | ✅ | ✅ | 生成10题 |
|
||||
| 6 | 发布题库 | ✅ | ✅ | ✅ | — |
|
||||
| 7 | 创建考生账号 | ❌(API) | ✅ | ✅ | student-e2e |
|
||||
| 8 | 考生登录 | ✅ | ✅ | ✅ | student-e2e/exam123 |
|
||||
| 9 | 答题(选择) | ✅ | ✅ | ✅ | 选A→确认 |
|
||||
| 10 | 答题(简答) | ✅ | ✅ | ✅ | 输入→发送 |
|
||||
| 11 | 追问处理 | ✅ | ✅ | ✅ | 再输入→再发送 |
|
||||
| 12 | 查看分数 | ✅ | ✅ | ✅ | 验证finalScore |
|
||||
| 13 | 查看证书 | ✅ | ✅ | ✅ | 验证level/dimensions |
|
||||
| 14 | 查看历史记录 | ✅ | ✅ | ✅ | 验证列表有新纪录 |
|
||||
|
||||
---
|
||||
|
||||
## 七、第一个全流程测试设计
|
||||
|
||||
我们将从 Generator 录制开始，先完成 **阶段 2 → 6** 的完整录制，
|
||||
然后用 Planner 编排成一个完整的 `full-assessment.e2e.spec.ts`，
|
||||
最后用 Healer 运行验证。
|
||||
Reference in New Issue
Block a user