[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-ai-test-generation-e2e-zh":3,"seo:pack:ai-test-generation-e2e:zh":99},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":98},"ai-test-generation-e2e","🧪","#16A34A","new","本周新建","AI 测试生成 + E2E 全家桶","想让 AI 把缺失的单测补齐、从规格生成 property 测试、用真浏览器跑 E2E、CI 里自动 triage 快照的开发者，这十个就是顺序：Test Engineer agent + Vitest + Jest + pytest + Hypothesis + MSW + Playwright + Playwright MCP + Playwright Tester agent + verify-app — 按推荐安装顺序排列。",[16,28,36,43,50,57,65,73,83,90],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},4412,"f3c765fa-e899-4945-8abb-cee2e08d5edc","claude-code-agent-test-engineer-f3c765fa","Claude Code Agent: Test Engineer","Test automation and quality assurance specialist. Use PROACTIVELY for test strategy, test automation, coverage analysis, CI\u002FCD testing, and quality engineering practices.","TokRepo精选",15,0,"en","skill","Skill",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":35,"vote_count":24,"lang_type":25,"type":26,"type_label":27},989,"267275ed-355f-11f1-9bc6-00163e2b0d79","vitest-next-generation-testing-framework-powered-vite-267275ed","Vitest — Next Generation Testing Framework Powered by Vite","Vitest is a blazing-fast unit testing framework powered by Vite, with native ESM, TypeScript, and JSX support. Jest-compatible API, instant HMR for tests, and in-source testing make it the go-to test runner for Vite projects.","AI Open Source",189,{"id":37,"uuid":38,"slug":39,"title":40,"description":41,"author_name":34,"view_count":42,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1111,"4240433c-364b-11f1-9bc6-00163e2b0d79","jest-delightful-javascript-testing-framework-4240433c","Jest — Delightful JavaScript Testing Framework","Jest is a delightful JavaScript testing framework with a focus on simplicity. Zero-config for most JS\u002FTS projects, snapshot testing, mocking, code coverage, and parallel test execution. Created by Facebook and used to test React, Instagram, and many large codebases.",174,{"id":44,"uuid":45,"slug":46,"title":47,"description":48,"author_name":34,"view_count":49,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1119,"42405aa1-364b-11f1-9bc6-00163e2b0d79","pytest-python-testing-framework-scales-42405aa1","pytest — The Python Testing Framework That Scales","pytest makes it easy to write small tests, yet scales to support complex functional testing. Fixtures, parameterization, plugins, markers, and a rich assertion introspection system. The de facto testing standard for the Python ecosystem.",162,{"id":51,"uuid":52,"slug":53,"title":54,"description":55,"author_name":34,"view_count":56,"vote_count":24,"lang_type":25,"type":26,"type_label":27},2622,"a0e81556-4792-11f1-9bc6-00163e2b0d79","hypothesis-property-based-testing-python-a0e81556","Hypothesis — Property-Based Testing for Python","Hypothesis is a Python testing library that generates test cases automatically based on specifications you define, finding edge cases that hand-written tests miss.",144,{"id":58,"uuid":59,"slug":60,"title":61,"description":62,"author_name":63,"view_count":64,"vote_count":24,"lang_type":25,"type":26,"type_label":27},1271,"dc65506c-37be-11f1-9bc6-00163e2b0d79","msw-api-mocking-next-generation-dc65506c","MSW — API Mocking of the Next Generation","Mock Service Worker intercepts network requests at the service worker layer, letting you mock REST and GraphQL APIs for tests and development without stubbing fetch. The same mocks work in Node, jsdom, browsers, and React Native.","Script Depot",166,{"id":66,"uuid":67,"slug":68,"title":69,"description":70,"author_name":71,"view_count":72,"vote_count":24,"lang_type":25,"type":26,"type_label":27},2395,"af656d8e-446c-11f1-9bc6-00163e2b0d79","playwright-cross-browser-end-end-testing-framework-af656d8e","Playwright — Cross-Browser End-to-End Testing Framework","Reliable end-to-end testing for modern web apps across Chromium, Firefox, and WebKit with a single API.","Microsoft AI",145,{"id":74,"uuid":75,"slug":76,"title":77,"description":78,"author_name":79,"view_count":80,"vote_count":24,"lang_type":25,"type":81,"type_label":82},3687,"0c80ab9c-0031-5a65-b7f5-fcdb5de2232e","playwright-mcp-browser-automation-for-agents","Playwright MCP — Browser Automation for Agents","Playwright MCP exposes browser automation via MCP with device emulation; verified 5,510★ and documents 143 device profiles plus `playwright install` setup.","MCP Hub",85,"mcp","MCP",{"id":84,"uuid":85,"slug":86,"title":87,"description":88,"author_name":22,"view_count":89,"vote_count":24,"lang_type":25,"type":26,"type_label":27},4405,"cf9884c5-e90d-40b7-b091-c1141c626fd4","claude-code-agent-playwright-tester-cf9884c5","Claude Code Agent: Playwright Tester","Testing mode for Playwright tests",27,{"id":91,"uuid":92,"slug":93,"title":94,"description":95,"author_name":96,"view_count":97,"vote_count":24,"lang_type":25,"type":26,"type_label":27},2274,"203ea157-a7c6-48fd-9d0d-4bb185bbb6d5","verify-app-e2e-test-subagent-for-claude-code-203ea157","verify-app — E2E Test Subagent for Claude Code","Open-source Claude Code subagent that runs end-to-end tests on recent changes and triages failures. Inspired by Boris Cherny's verify-app setup.","Skill Factory",210,"tokrepo install pack\u002Fai-test-generation-e2e",{"pageType":100,"pageKey":8,"locale":101,"title":102,"metaDescription":103,"h1":104,"tldr":105,"bodyMarkdown":106,"faq":107,"schema":123,"internalLinks":129,"citations":142,"wordCount":155,"generatedAt":156},"pack","zh","AI 测试生成 + E2E 全家桶 — 10 个让 CI 转绿的精选","AI 写缺失的单测、从规格生成 property 测试、用真浏览器跑 E2E、CI 里自动 triage 快照。Test Engineer agent + Vitest + Jest + pytest + Hypothesis + MSW + Playwright + Playwright MCP + Playwright Tester + verify-app。按顺序装。","AI 测试生成 + E2E 全家桶 — 从空测试套到 CI 全绿","十个资产按安装顺序：先 Test Engineer agent 规划策略，再单测层（Vitest 主力 \u002F Jest 兜底 \u002F pytest 管 Python），然后 Hypothesis 从规格生成 property 测试，MSW 拦截网络层，再到 E2E 层（Playwright 框架 + Playwright MCP 让 agent 开真浏览器 + Playwright Tester 写 spec），最后 verify-app 在 CI 里跑完并把红灯解释清楚。","## 这个 pack 包含什么\n\n这是给那个终于承认「**AI 写无聊测试比我快**」的工程师准备的 pack — 那些 6 种字符串排列的 validator 测试、14 个字段的接口测试、点穿整个 onboarding 的 E2E。你不想再手写了。你要的是一整套系统：一个 agent 读文件出测试计划，一个不让你等的 runner，一个补齐你脑子里漏掉的 case 的 property 生成器，一个不让测试打到生产的 mock，一个 agent 能开的真浏览器，一个 CI 里 triage 红灯的 subagent。\n\n下面这十个就是那套系统的**安装顺序**。JavaScript\u002FTypeScript 是脊柱（现代 web 大部分），Python 是第二条线（AI \u002F 数据那一侧），中间靠 Test Engineer agent 按语言挑 runner 衔接。每一个都开源、都在 TokRepo 上，AI 编码 agent 在 session 里直接装得了。\n\n目标读者：手里有个真实代码仓库，覆盖率 \u003C40%，sprint 时段尝试过写测试然后放弃，现在想让 Claude \u002F Codex \u002F Cursor 在你监督下把这事儿干了。装完第 10 个，你会有 unit + integration + E2E + snapshot 测试在每次 commit 上跑，外加一个会读失败日志、用大白话告诉你哪儿坏了的 subagent。\n\n## 推荐安装顺序\n\n1. **Claude Code Agent: Test Engineer** — 先装这个。这是元 agent，读你的代码、挑 runner、起草测试计划、把剩下的活分发出去。不先装它，你会装八个工具但永远串不起来。叫 `@test-engineer`，让它在你装任何具体框架之前先出策略。\n2. **Vitest** — Vite 系（Nuxt、现代 React、Svelte、Solid）的快单测 runner。原生 ESM、TypeScript 开箱、Jest 兼容 API、HMR 式 watch 模式 ~50ms 重跑。先装这个因为门槛最低 — 一个 `vitest.config.ts` 就够了。\n3. **Jest** — 兜底。pre-Vite 代码库（Create React App、老 Node、所有 CommonJS）还是 Jest 的天下。expect API 和 Vitest 一样，写好的测试基本可以平移。Vitest 不适配你的栈再装这个，否则跳过。\n4. **pytest** — Python 这边。fixtures、参数化、插件全套。AI agent 喜欢 pytest 因为断言失败信息异常可读 — Claude 读一份失败的 pytest 输出，直接知道改哪儿。\n5. **Hypothesis** — Python 的 property-based 测试。不用写 20 个示例输入，你写**性质**（「reverse 两次等于原列表」），Hypothesis 自动生成输入，把失败例 shrink 到最小可复现。这是 AI 测试生成从「看起来对」升级到「真能抓 bug」的分水岭。原生配合 pytest。\n6. **MSW (Mock Service Worker)** — 网络层 mock。在 service worker 拦截 `fetch` 和 `XHR`，集成测试不再打到生产。AI 角度：agent 写的测试要打 `\u002Fapi\u002Fusers`，MSW 给它一个确定性的响应 — 不带 secret、不限流、不 flake。这是 unit 风格和 E2E 风格的分界线。\n7. **Playwright** — E2E 框架。跨浏览器（Chromium \u002F Firefox \u002F WebKit），auto-wait 让 flake 掉 ~90%，失败时自动出视频 + trace 方便 debug。如果只装一个 E2E 工具，就是它。`codegen` 录制生成的测试 agent 再二次加工。\n8. **Playwright MCP** — 把 Playwright 通过 MCP 暴露给 AI agent 的服务器。这下 Claude Code \u002F Cursor \u002F Codex 能导航页面、填表单、点按钮、拍快照 — 真在开浏览器，不是猜 DOM。这才是「AI 跑 E2E」不至于变成 agent 幻觉选择器的关键。\n9. **Claude Code Agent: Playwright Tester** — 专门**写** Playwright spec 的 subagent。喂它一个用户流程（「注册 → onboard → 第一个项目」），它出一个带正确 locator、auto-wait、断言的 `.spec.ts`。没它你手敲 `page.click(...)`；有它你 code review agent 起草的测试。\n10. **verify-app — E2E Test Subagent for Claude Code** — CI 层。Claude Code 改完代码后，`verify-app` 在改动的面上跑相关 E2E，triage 失败，用人话回报（「signup 测试挂了，因为按钮的 `data-cta` 改成了 `data-test-id`」）。这是闭环的最后一节：测试跑、测试挂、agent 解释、你改、agent 重跑。\n\n## 它们怎么协同\n\n```\nTest Engineer (#1)\n   │\n   └─ 读代码库、挑 runner、起草计划\n         │\n单测层:\n   Vitest (#2)  ←  主力（Vite 系）\n   Jest (#3)    ←  兜底（legacy \u002F 非 Vite）\n   pytest (#4)  ←  Python 侧\n         │\nProperty 层:\n   Hypothesis (#5) 从规格生成输入\n         │\n集成边界:\n   MSW (#6) mock 网络，测试保持 hermetic\n         │\nE2E 层:\n   Playwright (#7) — 框架\n   Playwright MCP (#8) — agent 开真浏览器\n   Playwright Tester agent (#9) — 写 spec\n         │\nCI 层:\n   verify-app subagent (#10) — 在 diff 上跑 E2E，triage 失败\n```\n\n**Test Engineer + Hypothesis + verify-app** 这三件套是 agent 化的脊柱。拿掉这三个，剩下的就是普通测试栈。留着这三个，循环就闭合：agent 规划、生成器抓边界、runner 报告、subagent triage，你做决策不是敲断言。\n\n## 你会遇到的取舍\n\n- **Vitest vs Jest** — Vitest 更快、原生 ESM、不用 transform 配置 — 但假设了 Vite。Jest 更老更慢，但在每个出过的 JS 环境里都能跑。经验法则：新项目 = Vitest；继承的代码库 = 跟现有那个。\n- **Hypothesis vs 示例测试** — Property 测试能抓你示例永远想不到的 bug，但更难写难读。Hypothesis 用在**纯函数**（parser、validator、数学），I\u002FO 重的代码还是用示例（性质只能是「不崩」，没啥用）。\n- **MSW vs 真测试服务器** — MSW 更快更确定性，但它会**骗你** — 代码通过的是 mock，可能不符合生产 schema。对策：从 OpenAPI 规格生成 MSW handler，mock 和生产就不会悄悄漂移。\n- **Playwright vs Playwright MCP** — 框架跑你写的脚本测试。MCP 让 agent 即兴发挥。**两个都要**：scripted Playwright 在 CI 里跑回归；Playwright MCP 用来「agent 你点一下新 onboarding 告诉我哪儿坏了」这种临时活。\n- **Test Engineer agent vs 自己写计划** — agent 在策略上 ~80% 正确，对你具体业务不变量经常错。把它的计划当草稿，执行前改一遍。\n\n## 常见踩坑\n\n- **一次装 10 个** — 别。挑你的栈（JS 或 Python），先装 1-2-5-6-7-10 这六个，跑出绿色 pipeline，再加剩下的。pack 是菜单不是任务清单。\n- **第一天就让 agent 写 200 个测试** — 质量比数量重要。让 Test Engineer agent 起草 10 个核心路径测试，每个 code review，再扩。200 个平庸测试就是包装精美的技术债。\n- **MSW handler 永远不更新** — 把 MSW handler 当类型定义对待：API 变了就重新生成。stale mock 是「测试全绿」依然 ship 坏代码的元凶。\n- **CI 里跑 Playwright MCP** — 别。MCP 是给交互式 session 让 agent 探索用的。CI 应该跑 **scripted** Playwright spec（更快、可复现、不烧每次 LLM 费用）。用 Playwright Tester (#9) **写** spec，让 CI 确定性地跑。\n- **觉得 verify-app 多余因为「我 CI 已经跑测试了」** — 你的 CI 跑测试。verify-app **解释**失败。第一次 Claude Code session 把测试搞挂、verify-app 告诉你哪个 selector 改了，你就懂区别了。\n- **Hypothesis 用在不纯的代码上** — 给一个碰数据库的函数做 property 测试，就是 flake 制造机。先把纯逻辑重构出来，对纯逻辑做 property 测试，I\u002FO 留给示例 pytest。",[108,111,114,117,120],{"q":109,"a":110},"同一个项目真的要同时装 Vitest 和 Jest 吗？","不用。挑一个。pack 列了两个是因为不同项目栈不一样 — Vite 系装 Vitest，老 CRA \u002F Node CommonJS 留 Jest。新项目直接选 Vitest 跳过第 3 步。Test Engineer agent (#1) 扫一下 repo 30 秒告诉你装哪个。",{"q":112,"a":113},"Playwright (#7) \u002F Playwright MCP (#8) \u002F Playwright Tester agent (#9) 区别？","Playwright 是框架 — CI 里跑 `.spec.ts` 文件。Playwright MCP 是 server，让编码 agent 交互式开真浏览器（探索好用，CI 跑费用爆炸）。Playwright Tester agent 是专门**给你写** `.spec.ts` 的。流水线：Tester agent 写 spec → CI 用 Playwright 跑 → MCP 留给「现在就要真浏览器看看」的临时活。",{"q":115,"a":116},"AI 能直接生成示例的话，为啥还要 Hypothesis？","AI 生成它想得到的示例。Hypothesis 从性质推导：带 unicode 边界的随机字符串、边界附近的整数、共享引用的列表 — 人（或 LLM）不会想到去试的 case。配合很好：让 Claude 提出性质陈述，Hypothesis 找反例，把测试 ship 上去。",{"q":118,"a":119},"只有一下午的话，先装哪三个？","Test Engineer agent (#1)、Playwright (#7)、verify-app (#10)。Agent 规划，Playwright 跑杠杆最高的测试（E2E 能抓单测永远抓不到的 bug），verify-app 解释失败。第二天按语言加 Vitest (#2) 或 pytest (#4)。中间几个（MSW、Hypothesis、Playwright MCP）是第二周回报的升级。",{"q":121,"a":122},"这个 pack 是不是只针对 Claude Code？","两个 subagent（#1 Test Engineer、#10 verify-app）和 #9 Playwright Tester 是 Claude Code 原生。其它（Vitest \u002F Jest \u002F pytest \u002F Hypothesis \u002F MSW \u002F Playwright \u002F Playwright MCP）跟语言和工具无关 — Cursor \u002F Codex CLI \u002F Cline \u002F Roo \u002F 纯 CLI 都能跑。不在 Claude Code 上的话，把三个 agent 换成你工具链里的等价物，剩下的安装顺序照搬。",{"@context":124,"@type":125,"name":13,"description":126,"numberOfItems":127,"inLanguage":128},"https:\u002F\u002Fschema.org","ItemList","十个精选资产，给想让 AI 补齐缺失单测、从规格生成 property 测试、用浏览器 agent 跑 E2E、CI 里自动 triage 快照的工程师 — 按推荐安装顺序排列。",10,"zh-CN",[130,134,138],{"url":131,"anchor":132,"reason":133},"\u002Fzh\u002Ftopics","浏览其他主题 pack","相邻 pack：API 测试栈、浏览器自动化、MCP 服务器全家桶",{"url":135,"anchor":136,"reason":137},"\u002Fzh\u002Fai-tools-for\u002Ftesting","AI 测试工具","看更大的测试 runner \u002F mock \u002F E2E 框架目录",{"url":139,"anchor":140,"reason":141},"\u002Fzh\u002Ffeatured","TokRepo 精选资产","装完这个 pack 后浏览更大的精选目录",[143,147,151],{"claim":144,"source_name":145,"source_url":146},"Playwright 通过单一 API 支持 Chromium、Firefox、WebKit","Playwright 官方文档","https:\u002F\u002Fplaywright.dev\u002F",{"claim":148,"source_name":149,"source_url":150},"Hypothesis 是 Python 的 property-based 测试库","Hypothesis 官方文档","https:\u002F\u002Fhypothesis.readthedocs.io\u002F",{"claim":152,"source_name":153,"source_url":154},"Mock Service Worker 在网络层通过 service worker 拦截请求","MSW 官方文档","https:\u002F\u002Fmswjs.io\u002F",1280,"2026-05-22T00:00:00Z"]