224 lines
5.8 KiB
Markdown
Executable File
224 lines
5.8 KiB
Markdown
Executable File
# 超级Loop（E2E Loop）
|
||
|
||
> 相关：[[核心Loop]]、[[Loop工程]]、[[测试策略金字塔]]、[[Playwright]]、[[Browser_Use]]
|
||
|
||
## 定义
|
||
|
||
**超级Loop**是在[[核心Loop]]基础上增加E2E测试验证的扩展循环，确保前后端联动的正确性。
|
||
|
||
**核心思想**：通过E2E测试纳入更大的Loop范围，验证完整的用户流程。
|
||
|
||
## 核心流程
|
||
|
||
```
|
||
开始进入循环
|
||
↓
|
||
[Chat] 进入Plan模式
|
||
↓
|
||
装载需求规格/界面原型，给出指令进行Plan
|
||
↓
|
||
[Chat] 符合要求，退出Plan模式，开始执行？
|
||
↓ 是
|
||
[模型] 读取Plan，按照Loop规则进行实现
|
||
↓
|
||
[模型] 满足Loop准出要求？
|
||
↓ 否 → 重复多次/白天持续很久/夜间
|
||
↓ 是
|
||
[模型] 退出循环
|
||
↓
|
||
（给予ByPass权限）
|
||
```
|
||
|
||
## 7个步骤
|
||
|
||
### 1. Plan等待确认
|
||
在docs/plans下根据模版创建Plan。
|
||
|
||
```markdown
|
||
# Plan: 实现用户注册功能（含前端）
|
||
|
||
## 目标
|
||
实现用户注册功能，包括后端API和前端页面
|
||
|
||
## 任务列表
|
||
- [ ] 1. 实现POST /api/v1/users API
|
||
- [ ] 2. 实现注册页面 /register
|
||
- [ ] 3. 实现表单验证
|
||
- [ ] 4. 实现注册成功跳转
|
||
- [ ] 5. 编写API测试
|
||
- [ ] 6. 编写E2E测试
|
||
|
||
## 验收标准
|
||
- 所有API测试通过
|
||
- 所有E2E测试通过
|
||
- 前端页面视觉效果符合设计稿
|
||
```
|
||
|
||
### 2. 编写测试用例
|
||
在docs/test-cases下编写E2E测试用例。
|
||
|
||
```markdown
|
||
# docs/test-cases/register.md
|
||
|
||
## 测试用例
|
||
|
||
### TC-001: 成功注册
|
||
1. 访问 /register 页面
|
||
2. 输入用户名 testuser
|
||
3. 输入邮箱 test@example.com
|
||
4. 输入密码 Password123
|
||
5. 确认密码 Password123
|
||
6. 点击注册按钮
|
||
7. 验证跳转到 /login
|
||
8. 验证提示"注册成功"
|
||
|
||
### TC-002: 用户名已存在
|
||
1. 访问 /register 页面
|
||
2. 输入已存在的用户名 existinguser
|
||
3. 点击注册按钮
|
||
4. 验证提示"用户名已存在"
|
||
```
|
||
|
||
### 3. 编写API测试
|
||
根据Plan实现API测试，运行成功并断言失败。
|
||
|
||
```java
|
||
@Test
|
||
void testRegister() {
|
||
CreateUserRequest request = new CreateUserRequest();
|
||
request.setUsername("testuser");
|
||
request.setEmail("test@example.com");
|
||
request.setPassword("Password123");
|
||
|
||
Response<UserResponse> response = userClient.create(request);
|
||
|
||
assertEquals(201, response.getCode());
|
||
assertNotNull(response.getData().getId());
|
||
}
|
||
```
|
||
|
||
### 4. 编写实现
|
||
编写后端和前端实现代码。
|
||
|
||
**后端实现**：
|
||
```java
|
||
@PostMapping("/users")
|
||
public Response<UserResponse> createUser(@RequestBody CreateUserRequest request) {
|
||
return Response.success(userAppService.create(request));
|
||
}
|
||
```
|
||
|
||
**前端实现**：
|
||
```tsx
|
||
function RegisterPage() {
|
||
const [form] = Form.useForm();
|
||
|
||
const handleSubmit = async (values) => {
|
||
await axios.post('/api/v1/users', values);
|
||
message.success('注册成功');
|
||
navigate('/login');
|
||
};
|
||
|
||
return (
|
||
<Form form={form} onFinish={handleSubmit}>
|
||
<Form.Item name="username" rules={[{ required: true }]}>
|
||
<Input placeholder="用户名" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit">注册</Button>
|
||
</Form>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 5. 运行API测试
|
||
运行测试，并修复失败的测试和其他错误。
|
||
|
||
```bash
|
||
mvn test -Dtest=UserApiTest
|
||
```
|
||
|
||
### 6. 浏览器调试
|
||
使用[[Playwright]]调试前端，确认视觉效果和交互功能。
|
||
|
||
```typescript
|
||
test('注册页面视觉效果', async ({ page }) => {
|
||
await page.goto('/register');
|
||
|
||
// 截图验证视觉效果
|
||
const screenshot = await page.screenshot();
|
||
// 调用AI视觉模型验证
|
||
|
||
// 验证表单验证
|
||
await page.fill('[name="email"]', 'invalid-email');
|
||
await page.click('button[type="submit"]');
|
||
await expect(page.getByText('请输入有效的邮箱')).toBeVisible();
|
||
});
|
||
```
|
||
|
||
### 7. 编写E2E测试
|
||
编写[[Playwright]] E2E测试，覆盖本轮需求的测试场景。
|
||
|
||
```typescript
|
||
test('完整的注册流程', async ({ page }) => {
|
||
await page.goto('/register');
|
||
|
||
await page.getByLabel('用户名').fill('testuser');
|
||
await page.getByLabel('邮箱').fill('test@example.com');
|
||
await page.getByLabel('密码').fill('Password123');
|
||
await page.getByLabel('确认密码').fill('Password123');
|
||
|
||
await page.getByRole('button', { name: '注册' }).click();
|
||
|
||
await expect(page).toHaveURL(/\/login/);
|
||
await expect(page.getByText('注册成功')).toBeVisible();
|
||
});
|
||
```
|
||
|
||
## 超级Loop vs 核心Loop
|
||
|
||
| 维度 | [[核心Loop]] | 超级Loop |
|
||
|------|-------------|----------|
|
||
| 测试范围 | API测试 | API测试 + E2E测试 |
|
||
| 验证层次 | 后端逻辑 | 前后端联动 |
|
||
| 复杂度 | 中等 | 高 |
|
||
| 运行时间 | 几分钟 | 几十分钟到几小时 |
|
||
| Token消耗 | 中等 | 高 |
|
||
| 适用场景 | 后端开发 | 全栈开发 |
|
||
|
||
## 适用场景
|
||
|
||
- **全栈开发**：需要同时开发前后端
|
||
- **复杂交互**：需要验证前后端联动
|
||
- **用户体验**：需要验证视觉效果
|
||
- **完整流程**：需要验证完整的用户流程
|
||
|
||
## 优势
|
||
|
||
- **全面验证**：验证前后端联动的正确性
|
||
- **用户体验**：验证视觉效果和交互
|
||
- **完整流程**：验证完整的用户流程
|
||
- **质量保障**：E2E测试保证质量
|
||
|
||
## 挑战
|
||
|
||
- **成本高**：运行时间长，Token消耗大
|
||
- **维护成本**：E2E测试需要持续维护
|
||
- **调试复杂**：需要调试前后端
|
||
- **环境依赖**：依赖完整的环境
|
||
|
||
## 最佳实践
|
||
|
||
1. **先写测试用例**：明确验收标准
|
||
2. **API测试先通过**：确保后端逻辑正确
|
||
3. **浏览器调试**：验证前端视觉效果
|
||
4. **E2E测试覆盖**：确保前后端联动正确
|
||
5. **成本控制**：仅在必要时使用
|
||
|
||
## 相关概念
|
||
|
||
- [[核心Loop]]：超级Loop基于核心Loop
|
||
- [[Loop工程]]：超级Loop是Loop工程的扩展
|
||
- [[测试策略金字塔]]：超级Loop使用的测试策略
|
||
- [[Playwright]]：超级Loop使用的E2E测试工具
|
||
- [[Browser_Use]]：超级Loop可能使用的浏览器自动化工具
|