Playwright 组件测试
用故事画廊和标准 Playwright 测试隔离验证 React 或 Vue 组件。
文档明确将组件状态、回调和可序列化 props 放在浏览器内 story 中，并建议阻断 service worker、限制查询范围；未要求凭据或高权限操作，也未见恶意外传。扣分在于会修改项目配置、启动开发服务器并可能访问应用网络，但没有用户确认、敏感数据处理、回滚步骤或依赖安全说明。
核心流程、错误传播、root 复用、update/unmount 和若干示例均有说明；但静态证据无法证明可运行。Vue 说明在不同文件中对挂载方式不完全一致，React 示例建议与 gallery 示例存在细节差异，且 migration 的回调示例违反前文“回调不能跨 mount 传递”的约束，可能导致误用。静态校准下不超过10，故扣除异常路径和文档一致性分。
目标用户和触发条件清楚：React/Vue 隔离组件测试及从实验性 CT 迁移；同时覆盖 Vite、Next、webpack、无 dev server、monorepo、providers、network mocking 等边界。扣分在于没有明确不适用的组件类型、复杂交互或非浏览器场景，全文仅英文，对中文用户的语言适配有限；核心功能不依赖特定海外在线服务。
文档按概念、流程、规范、模式、框架参考和迁移拆分，包含配置、示例、限制及 known gotchas；提供 Apache-2.0、Microsoft provenance、仓库版本和安全报告入口作为上下文证据。扣分在于 skill 本身没有版本兼容矩阵、changelog、明确维护责任或更新路径，部分引用模板/依赖假设未完全自包含，且缺少更系统的 troubleshooting/FAQ。
该 skill 能覆盖搭建 gallery、配置 Playwright、编写 story/spec、迁移 CT 和调试的主要任务，示例输出基本可直接改写。扣分在于 gallery 必须由用户自行实现、没有完整可复制模板，React 示例 story 在给定材料中缺失；回调迁移示例存在跨边界传 callback 的矛盾，可能需要较多人工修正。静态校准下不超过7。
选定 skill 及其 references/templates 包含具体接口契约、代码样例、错误行为和 story/spec 映射，具备一定审计性。扣分在于给定材料没有针对该 component-testing 路径的 CI 工作流、提交测试或第三方执行结果，无法静态证明关键路径；按校准上限不超过5。
- 迁移示例中的 callback 通过 mount props 传入，与“回调不能跨边界传递”的设计约束冲突；应改为 story 内部记录状态并由测试断言。
- gallery、story discovery、框架插件和 dev server 均需用户按项目自行实现；story id 是字符串，重命名可能只在运行时失败或发生后缀误匹配。
- 执行前应核对 React/Vue、Vite/其他 bundler、Playwright 版本及依赖，并自行建立可回滚的配置与迁移备份。
这个 Skill 能做什么，适合哪些场景？
这个技能指导你使用应用自己的开发服务器搭建组件故事画廊，并通过 Playwright 的内置 mount fixture 运行组件测试。每个 story 在浏览器中准备组件所需的 props、状态、回调和 providers，测试则通过页面可观察结果进行断言。它不需要专用组件测试运行时、打包器集成或额外测试包。该方法也适合从 @playwright/experimental-ct-react 或 @playwright/experimental-ct-vue 迁移。
识别 React 或 Vue 及其 bundler；创建位于 playwright/gallery/ 的画廊页面，通过 window.mount(params) 和 window.unmount() 渲染 story；配置 Playwright 项目、baseURL、webServer、serviceWorkers 和 reuseContext；在组件旁创建 .story.* 文件；编写使用 mount、Locator、update、page.route 和 web-first assertions 的测试；运行 npx playwright test --project=components，并支持在浏览器中查看故事画廊。
- 前端开发者希望在隔离环境中测试 React 组件的交互、回调和视觉状态。
- Vue 团队需要为多个组件场景编写可审查、可检索的 story 和 Playwright 测试。
- 使用 Vite 的应用希望直接复用现有开发服务器运行组件画廊。
- 非 Vite 应用需要通过独立 Vite 开发服务器为组件测试提供画廊页面。
- 团队准备从 @playwright/experimental-ct-react 或 @playwright/experimental-ct-vue 迁移到普通 Playwright 测试。
这个 Skill 有哪些优点和局限？
- 使用标准 Playwright 测试、Locator 和 web-first assertions。
- 故事在浏览器中拥有完整场景状态，回调结果可记录到隐藏表单并断言。
- 不需要专用组件测试运行时或额外组件测试包。
- 支持 React 和 Vue，并可使用页面级网络路由模拟。
- 多个 story 可在同一测试中独立挂载，也支持对根 Locator 截图。
- 需要自行实现符合 references/gallery-spec.md 的 gallery，没有可直接复制的模板。
- 非 Vite 应用需要额外配置独立 Vite 服务器及框架插件。
- 源材料没有提供实际示例项目、测试结果或平台验证记录。
- 该技能只覆盖组件测试工作流，不应推断为 Playwright 全部 CLI、MCP、库或 VS Code 能力。
如何安装这个 Skill？
该技能位于 Playwright 仓库的 packages/playwright-core/src/tools/skills/playwright-component-testing/SKILL.md。使用 Playwright Test 的项目可按仓库 README 安装：npm i -D @playwright/test，然后运行 npx playwright install。非 Vite 应用还需要将 vite 和对应的 React 或 Vue framework plugin 作为开发依赖。源材料没有说明如何将单个 SKILL.md 安装到特定 Agent 客户端。
如何使用这个 Skill？
向支持该技能的编码 Agent 提出类似请求："为我的 React 组件搭建 Playwright story gallery，并测试 Button 的主要、禁用和回调状态。"按技能说明实现 gallery，配置 components 项目，在 tests/components 中编写测试，然后运行 npx playwright test --project=components。组件测试通过 mount('components/Button/Primary') 加载 story；需要参数时可传入 mount(storyId, props)，需要保持状态并更新 props 时使用 component.update(newProps)。
这个 Skill 与同类方案有什么区别？
相较于 @playwright/experimental-ct-react 或 @playwright/experimental-ct-vue，这套方法使用普通 Playwright 端到端测试配合故事画廊，不依赖专用组件测试运行时。