AI 测试生成 + E2E 全家桶

这个 pack 包含什么

这是给那个终于承认「AI 写无聊测试比我快」的工程师准备的 pack — 那些 6 种字符串排列的 validator 测试、14 个字段的接口测试、点穿整个 onboarding 的 E2E。你不想再手写了。你要的是一整套系统：一个 agent 读文件出测试计划，一个不让你等的 runner，一个补齐你脑子里漏掉的 case 的 property 生成器，一个不让测试打到生产的 mock，一个 agent 能开的真浏览器，一个 CI 里 triage 红灯的 subagent。

下面这十个就是那套系统的安装顺序。JavaScript/TypeScript 是脊柱（现代 web 大部分），Python 是第二条线（AI / 数据那一侧），中间靠 Test Engineer agent 按语言挑 runner 衔接。每一个都开源、都在 TokRepo 上，AI 编码 agent 在 session 里直接装得了。

目标读者：手里有个真实代码仓库，覆盖率 <40%，sprint 时段尝试过写测试然后放弃，现在想让 Claude / Codex / Cursor 在你监督下把这事儿干了。装完第 10 个，你会有 unit + integration + E2E + snapshot 测试在每次 commit 上跑，外加一个会读失败日志、用大白话告诉你哪儿坏了的 subagent。

推荐安装顺序

1. Claude Code Agent: Test Engineer — 先装这个。这是元 agent，读你的代码、挑 runner、起草测试计划、把剩下的活分发出去。不先装它，你会装八个工具但永远串不起来。叫 @test-engineer，让它在你装任何具体框架之前先出策略。
2. Vitest — Vite 系（Nuxt、现代 React、Svelte、Solid）的快单测 runner。原生 ESM、TypeScript 开箱、Jest 兼容 API、HMR 式 watch 模式 ~50ms 重跑。先装这个因为门槛最低 — 一个 vitest.config.ts 就够了。
3. Jest — 兜底。pre-Vite 代码库（Create React App、老 Node、所有 CommonJS）还是 Jest 的天下。expect API 和 Vitest 一样，写好的测试基本可以平移。Vitest 不适配你的栈再装这个，否则跳过。
4. pytest — Python 这边。fixtures、参数化、插件全套。AI agent 喜欢 pytest 因为断言失败信息异常可读 — Claude 读一份失败的 pytest 输出，直接知道改哪儿。
5. Hypothesis — Python 的 property-based 测试。不用写 20 个示例输入，你写性质（「reverse 两次等于原列表」），Hypothesis 自动生成输入，把失败例 shrink 到最小可复现。这是 AI 测试生成从「看起来对」升级到「真能抓 bug」的分水岭。原生配合 pytest。
6. MSW (Mock Service Worker) — 网络层 mock。在 service worker 拦截 fetch 和 XHR，集成测试不再打到生产。AI 角度：agent 写的测试要打 /api/users，MSW 给它一个确定性的响应 — 不带 secret、不限流、不 flake。这是 unit 风格和 E2E 风格的分界线。
7. Playwright — E2E 框架。跨浏览器（Chromium / Firefox / WebKit），auto-wait 让 flake 掉 ~90%，失败时自动出视频 + trace 方便 debug。如果只装一个 E2E 工具，就是它。codegen 录制生成的测试 agent 再二次加工。
8. Playwright MCP — 把 Playwright 通过 MCP 暴露给 AI agent 的服务器。这下 Claude Code / Cursor / Codex 能导航页面、填表单、点按钮、拍快照 — 真在开浏览器，不是猜 DOM。这才是「AI 跑 E2E」不至于变成 agent 幻觉选择器的关键。
9. Claude Code Agent: Playwright Tester — 专门写 Playwright spec 的 subagent。喂它一个用户流程（「注册 → onboard → 第一个项目」），它出一个带正确 locator、auto-wait、断言的 .spec.ts。没它你手敲 page.click(...)；有它你 code review agent 起草的测试。
10. verify-app — E2E Test Subagent for Claude Code — CI 层。Claude Code 改完代码后，verify-app 在改动的面上跑相关 E2E，triage 失败，用人话回报（「signup 测试挂了，因为按钮的 data-cta 改成了 data-test-id」）。这是闭环的最后一节：测试跑、测试挂、agent 解释、你改、agent 重跑。

它们怎么协同

Test Engineer (#1)
   │
   └─ 读代码库、挑 runner、起草计划
         │
单测层:
   Vitest (#2)  ←  主力（Vite 系）
   Jest (#3)    ←  兜底（legacy / 非 Vite）
   pytest (#4)  ←  Python 侧
         │
Property 层:
   Hypothesis (#5) 从规格生成输入
         │
集成边界:
   MSW (#6) mock 网络，测试保持 hermetic
         │
E2E 层:
   Playwright (#7) — 框架
   Playwright MCP (#8) — agent 开真浏览器
   Playwright Tester agent (#9) — 写 spec
         │
CI 层:
   verify-app subagent (#10) — 在 diff 上跑 E2E，triage 失败

Test Engineer + Hypothesis + verify-app 这三件套是 agent 化的脊柱。拿掉这三个，剩下的就是普通测试栈。留着这三个，循环就闭合：agent 规划、生成器抓边界、runner 报告、subagent triage，你做决策不是敲断言。

你会遇到的取舍

• Vitest vs Jest — Vitest 更快、原生 ESM、不用 transform 配置 — 但假设了 Vite。Jest 更老更慢，但在每个出过的 JS 环境里都能跑。经验法则：新项目 = Vitest；继承的代码库 = 跟现有那个。
• Hypothesis vs 示例测试 — Property 测试能抓你示例永远想不到的 bug，但更难写难读。Hypothesis 用在纯函数（parser、validator、数学），I/O 重的代码还是用示例（性质只能是「不崩」，没啥用）。
• MSW vs 真测试服务器 — MSW 更快更确定性，但它会骗你 — 代码通过的是 mock，可能不符合生产 schema。对策：从 OpenAPI 规格生成 MSW handler，mock 和生产就不会悄悄漂移。
• Playwright vs Playwright MCP — 框架跑你写的脚本测试。MCP 让 agent 即兴发挥。两个都要：scripted Playwright 在 CI 里跑回归；Playwright MCP 用来「agent 你点一下新 onboarding 告诉我哪儿坏了」这种临时活。
• Test Engineer agent vs 自己写计划 — agent 在策略上 ~80% 正确，对你具体业务不变量经常错。把它的计划当草稿，执行前改一遍。

常见踩坑

• 一次装 10 个 — 别。挑你的栈（JS 或 Python），先装 1-2-5-6-7-10 这六个，跑出绿色 pipeline，再加剩下的。pack 是菜单不是任务清单。
• 第一天就让 agent 写 200 个测试 — 质量比数量重要。让 Test Engineer agent 起草 10 个核心路径测试，每个 code review，再扩。200 个平庸测试就是包装精美的技术债。
• MSW handler 永远不更新 — 把 MSW handler 当类型定义对待：API 变了就重新生成。stale mock 是「测试全绿」依然 ship 坏代码的元凶。
• CI 里跑 Playwright MCP — 别。MCP 是给交互式 session 让 agent 探索用的。CI 应该跑 scripted Playwright spec（更快、可复现、不烧每次 LLM 费用）。用 Playwright Tester (#9) 写 spec，让 CI 确定性地跑。
• 觉得 verify-app 多余因为「我 CI 已经跑测试了」 — 你的 CI 跑测试。verify-app 解释失败。第一次 Claude Code session 把测试搞挂、verify-app 告诉你哪个 selector 改了，你就懂区别了。
• Hypothesis 用在不纯的代码上 — 给一个碰数据库的函数做 property 测试，就是 flake 制造机。先把纯逻辑重构出来，对纯逻辑做 property 测试，I/O 留给示例 pytest。