02 · E2E 测试

E2E 测试覆盖的是用户视角的完整流程。写 E2E 测试最费力的是「把用户操作翻译成代码」——这正是 Claude Code 最擅长的。

用自然语言描述用户流程

用 Playwright 写以下用户流程的 E2E 测试：

流程：用户注册
1. 访问 /register 页面
2. 填写邮箱、密码、确认密码
3. 点击注册按钮
4. 跳转到 /dashboard，页面显示「欢迎，xxx」

测试文件放在 /e2e/auth.spec.ts。
用 page.getByRole 和 page.getByLabel 定位元素（不用 CSS selector）。

覆盖关键用户路径

核心业务流程都要有 E2E 测试：

为电商结账流程写 Playwright 测试，覆盖：
1. 用户从商品详情页加入购物车
2. 进入购物车，修改数量
3. 点击结账，填写收货信息
4. 选择支付方式，确认下单
5. 跳转到订单成功页，显示订单号

用 test.beforeEach 登录用户（从 .env.test 读取测试账号）。

生成页面对象模式（Page Object）

Playwright 推荐用 Page Object 组织测试：

读 /e2e/checkout.spec.ts，
把里面的页面操作抽取成 Page Object 类：
- CheckoutPage：结账页操作
- CartPage：购物车操作

放在 /e2e/pages/ 目录下，然后更新测试文件使用这些类。

Mock API 测试

不想依赖真实后端时，用 Playwright 的网络拦截：

写一个登录流程的 Playwright 测试，但 mock 掉 /api/auth/login 接口：
- 成功情况：返回 {token: 'xxx', user: {id: 1, name: '大齐'}}
- 失败情况：返回 400 {message: '密码错误'}

分别测试两种情况下的 UI 表现。

调试失败的 E2E 测试

/e2e/checkout.spec.ts 有一个测试失败了，错误信息如下：

[贴错误信息]

读测试文件和相关页面代码，分析可能原因并修复。
如果需要看页面结构，运行 playwright show-trace。