Playwright + MSW的E2E测试利器：OCTO如何构建百用例级前端测试体系

【免费下载链接】octo-webWeb desktop (Electron) client for the OCTO open workplace — one React TypeScript codebase shipping browser and PC surfaces, with first-class AI agent UX.项目地址https://gitcode.com/gh_mirrors/oc/octo-web点击查看免费下载本文拆解 OCTO 开放办公平台前端项目octo-web如何用Playwright MSW构建百用例级前端 E2E 测试体系双模式架构、mock 拦截细节、用例三件套规范与稳定性铁律帮助你在自己的前端项目中快速复刻一套可落地的 E2E 测试基础设施。 为什么需要百用例级 E2E 测试体系octo-web 是 OCTO 开放办公平台的 Web 桌面端客户端一套 React TypeScript 代码库同时产出浏览器版和 Electron 桌面版并且内建了 AI 智能总结、Agent 对话等一等功能。这类 SPA AI 产品的测试难点很典型无后端依赖本地跑测试不能依赖真实服务和账号状态复杂登录态、会话隔离SID、空间切换都要预置AI 流式交互回复不是一次性返回普通断言容易写挂多端分发browser、Electron、bridge 多条链路都要能测团队的答案是一套自研的e2e-kit测试工具包沉淀在 apps/web/e2e-kit/ 目录目前支撑着100 个测试用例文件、78 个 MSW mock handler、130 份用例规范文档覆盖聊天、智能总结、MCP 市场、联系人、搜索、设置中心、邮件等 13 个业务模块。️ e2e-kit 整体架构一个可移植的测试骨架整个体系按职责分层目录即文档目录职责msw-handlers/每个用例一个独立的 MSW mock handler78 个文件tests/Playwright 测试用例按业务模块分目录13 个子目录case-specs/用例规范文档目标、前置条件、操作步骤、预期结果、反例_lib/脚手架与门禁工具生成用例、格式 lint、证据收集global/rules.md跨项目通用铁律断言边界、Selector 策略、Flake 排查顺序_baseline/强制装载的基线 mock登录态兜底不装会被踢到登录页关键设计kit 骨架与业务用例严格分离。_kit/、_lib/、_baseline/由 kit 独占维护同步策略 overwrite业务方只写tests/、msw-handlers/、case-specs/三个目录版本信息由 manifest.yaml 记录做到升级骨架不污染用例同步用例不破坏骨架。⚙️ 双模式设计local mock 与真后端联调playwright.config.ts 用环境变量E2E_TARGET切换两种运行模式local默认Lite mock 模式。dev server 启动时注入VITE_E2E_MOCK1与VITE_E2E_MOCK_IM1前者开启 MSW mock后者挂 fake IM provider测试全程零外部依赖test真后端 storageState 模式由 global-setup 预登录后复用会话验证真实链路。两个值得注意的细节失败零容忍workers: 1handler 状态隔离retries: 0失败就失败不掩盖 flake这是配置文件里明确标注的kit 硬约束失败自动留证trace: retain-on-failure 失败截图 失败录像跑完用npx playwright show-trace trace.zip拖时间轴即可复现问题不用反复重跑。️ MSW 接入从启动拦截到多导航不漏请求应用侧的 mock 接入在 src/chatBootstrap.tsx几个关键点按需 tree-shake仅VITE_E2E_MOCK1时才动态import(./mocks/browser)启动 MSW Service Worker生产构建零副作用__MSW_READY__就绪闸门不是worker.start()返回就算就绪——还要等 Service Worker真正接管当前 document并打一发只有 MSW 才会应答的探针请求实测拦截生效才置__MSW_READY__ true。这一步解决的是多导航场景下SW 已激活但 document 未登记完导致的概率性请求泄漏暴露window.__msw把worker、http、HttpResponse挂到 window 上spec 里可以用worker.use(...)动态覆盖 handler支持有状态场景这是 Playwrightpage.route拦不到的 MSW SW 层。 用例三件套规范文档 测试 mock handler新增一个用例只需一条命令由 _lib/new-case.mjs 脚手架生成三件套pnpm e2e:new S30 summary-list-export --module summary --submodule listapps/web/e2e-kit/case-specs/summary/list/S30-summary-list-export.md ← 用例规范 apps/web/e2e-kit/tests/summary/list/S30-summary-list-export.spec.ts ← 测试用例 apps/web/e2e-kit/msw-handlers/s30-summary-list-export.ts ← MSW handler以 S26 用例规范 为例每份规范都包含 Metadata用例类型、登录状态、优先级、Tags、目标、前置条件、用户操作步骤、预期结果、反例什么不该发生和摸清依据源码定位。先写规范再写代码让每个用例的意图可追溯、可 review。handler 注册遵循baseline 强制 case 按需基线 mock 由 fixture 自动装载保证登录态用例专属 handler 必须由测试显式register禁止 install-all 糖——避免别的用例 handler 意外拦截本用例请求造成隐性污染。一个典型用例长这样S3 列表搜索test(搜索关键词后只显示命中的总结, async ({ authedPage }) { await registerS3SummaryListSearch(authedPage); const ctx startRequestMonitor(authedPage, sanityConfig); await authedPage.getByRole(button, { name: 智能总结 }).click(); await authedPage.getByTestId(T.listSearch).fill(客户); await expect(authedPage.getByText(S3 客户反馈总结)).toBeVisible(); await expect(authedPage.getByText(S3 周报总结)).toHaveCount(0); await sanityCheck(authedPage, ctx); }); authedPage fixture一次预置处处免登录fixtures-authed.ts 提供了两个核心 fixtureauthedPage通过addInitScript预置登录态token、UID、空间 ID、语言、跳过 onboarding固定?side2etest让所有存储键收敛到统一后缀随后等待__MSW_READY__和 mock IM seed 装载完成并主动 notify 一次连接状态保证首屏组件不丢事件pagePlain裸 page不预置任何状态用于测试未登录跳转、深链冷启等从零开始的场景。还内置了mockApiGuard自动 fixture对 happy-path 用例开启后会监听整个 BrowserContext任何真实后端请求泄漏、Service Worker passthrough、401/5xx 都会直接判失败——这是mock 是否真的全覆盖住的守门员。️ 稳定性铁律3x 才算稳global/rules.md 把团队踩坑经验固化为强制规则只做 UI 观察断言断dialog 关闭 / toast 出现 / 列表新增一项禁止waitForRequest 请求体比对——API 契约归后端测试管e2e 重复验证就是双头维护3x 稳定性门禁新增/修改用例必须--repeat-each3 --workers1三次全绿才能 commit单次 pass 只证明能过不证明稳定过Selector 优先级getByTestIdgetByRole name getByLabelgetByText禁 CSS classSPA/AI 专属策略禁networkidle改等 URL / landmark / 业务 ready 信号、contenteditable用 click keyboard 而非fill()、AI 流式回复用业务完成信号 新实质文本兜底两阶段等待Flake 排查顺序看error-context.md→ 看 Page snapshot 的 DOM 实际状态 → 才改测试。禁止一上来加 timeout 掩盖问题。 CI 执行冷启快、隔离好、证据全playwright.ci.config.ts 与本地配置的核心差异vite preview跑 build 产物冷启仅 3-10 秒本地 dev 模式要起全量 watch需 180 秒超时端口隔离PW_PREVIEW_PORT让并行 job 各用各的端口硬约束 mock 模式CI 只跑 MSW mock真后端走独立 pipeline互不拖累多 reporter 输出list HTML JUnit JSON 四份报告_lib/collect-evidence.sh 进一步把 trace / keyframes 打包成证据归档。多端分发也各有独立配置playwright.desktop.config.tsElectron、playwright.bridge.config.tsbridge、playwright.html-preview.config.tsHTML 预览沙箱一份用例骨架多端复用。 快速上手三步跑通# 1. 安装依赖仓库根目录 pnpm install # 2. 本地跑一个用例自动起 dev server MSW mock pnpm exec playwright test --grep S3 --workers1 # 3. 新增用例一键生成三件套 pnpm e2e:new S30 summary-list-export --module summary跑挂时按顺序排查test-results/case/error-context.md→ Page snapshot → trace 时间轴基本都能定位到selector 不精确 / DOM 未 mount / race三类根因而不是盲目加超时。✅ 总结这套体系值得抄走的 5 个设计骨架与用例分离kit 管机制业务管内容manifest 校验防漂移MSW 就绪闸门用探针请求实测拦截生效消灭概率性请求泄漏这类最难查的 flake三件套 规范先行spec 文档、测试、handler 同生同死用例意图可追溯UI 观察断言铁律e2e 只验用户能看见的东西拒绝 API 双头维护3x 稳定性门禁 失败留证稳定性的定义从跑过一次升级为连续三次全绿。如果你正在为一个复杂 SPA 搭建前端测试体系可以直接参考 apps/web/e2e-kit/ 的目录组织与 global/rules.md 的规则清单——它证明百用例级 E2E 测试不靠堆人力而是靠一套有纪律的基础设施。赞分享【免费下载链接】octo-webWeb desktop (Electron) client for the OCTO open workplace — one React TypeScript codebase shipping browser and PC surfaces, with first-class AI agent UX.项目地址https://gitcode.com/gh_mirrors/oc/octo-web点击查看免费下载相关推荐AutoGPT Platform 前端测试体系详解Vitest 页面级集成测试、MSW 自动 Mock 与 Playwright E2EAutoGPT Platform 前端测试体系详解Vitest 页面级集成测试、MSW 自动 Mock 与 Playwright E2E 本篇指南基于 Aut人工智能AI Agent自主智能体Agent 工作流工作流自动化后端前端WhoDB 测试体系全指南前端 Playwright E2E、Go 后端测试与 CLI 测试实战WhoDB 测试体系全指南前端 Playwright E2E、Go 后端测试与 CLI 测试实战 output_article_start_marker W数据库客户端后端前端CLI桌面应用数据可视化AI 应用IronClaw E2E 测试体系基于 Playwright Mock LLM Emulate 的浏览器级端到端测试实战IronClaw E2E 测试体系基于 Playwright Mock LLM Emulate 的浏览器级端到端测试实战 IronClaw 的端到端测人工智能AI 应用交互助手AI Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考