Phase 5 / Ep 22: 构建 E2E 无头测试自动化流

⏱ 预计阅读 3 分钟 更新于 2026/4/13

后端的核心业务全部运转通过了，接下来就要在屏幕上画界面了。写 UI 是大语言模型最擅长但也是最容易写得“金玉其外败絮其中”的领域。

它可能会给你写一个很好看的“同步日历”按钮，但这按钮按下去死活没反应。所以我们要祭出端到端（E2E）无头浏览器测试。

1. 建立独享工作流

在 .agents/workflows/e2e-testing.md 中立规矩：

description: E2E 测试运行与开发流
1. 涉及浏览器功能点击流的任务，必须通过 Playwright 验证。
2. 任何需要抓取按钮的情况，为了对抗 Tailwind 丑陋变换的类名，请在 `app/` 层的组件上**强制先增写清晰的 `data-testid` 属性**。绝对不允许基于 `div > div > button`的相对路径抓取。
3. 请在专用的测试隔离端口启动项目（防冲突）。

2. 避免测试环境崩溃

为什么要有第三条？很多使用粗糙 AI 的程序员会让它自动测试，结果 AI 在本地把生产网连通了，跑测试把数据库洗白了。

通过建立这份工作流，我们在执行指令前给 Agent 洗脑：一旦涉及到了浏览器流运转，必须遵守隔离和重置机制。测试是来救火的，绝不能反而把大本营烧了。