SuperAPI AI 工具集

playwright-component-testing

测试与质量

查看项目

更新于 10-16 03:47

技能介绍

用途:用常规 Playwright e2e 测试测试组件,测试目标是应用自身开发服务器托管的小型“故事画廊”页面,不依赖已停用的实验性组件测试运行时。内置 mount fixture 来自项目的 @playwright/test 包,画廊仍需框架与打包器依赖。

主要能力:故事是包裹被测组件、固化某个场景(固定 props、mock 数据、providers、回调记录)的小组件,放在组件旁 .story. 文件里,每个具名导出为一个故事。画廊是单页,暴露 window.mount(params)/window.unmount(),把故事渲染进 #root,需按 references/gallery-spec.md 自行实现。测试为普通 Playwright 测试,用 mount(storyId, props?) 驱动画廊并返回 #root 的 Locator。支持用 component.update(newProps) 测试不重挂载的 prop 变化,用 page.route() 做网络拦截(需在 mount 前注册,并配置 serviceWorkers: 'block')。

使用方式:先确认依赖 npm ls --depth=0 @playwright/test playwright,缺失时经批准再执行 npm install --save-dev @playwright/test;仅在需要且用户同意时装浏览器:npx --no-install playwright install chromium。识别框架和打包器:Vite 项目画廊由现有 dev server 提供于 /playwright/gallery/index.html;其他情况需另起小型 dev server 并将 baseURL 指向它。在 playwright.config.ts 中配置 components 项目与 webServer,并让 baseURL 与端口匹配。运行 npx --no-install playwright test --project=components。

适用场景:需对 React/Vue 组件做隔离、可复现、可审查的状态与交互测试,尤其是已有 Playwright e2e 体系的项目。

限制:故事与画廊必须自行实现,无模板可复制;组件所需一切须在故事内建立(运行于浏览器),断言只能通过页面可观察结果;props 仅限可序列化数据,回调须放在故事内;命名与 id 规则、全局 providers、monorepo 布局等需按 references 调整;跨客户端可用性、MCP 无必需服务器。未提供的细节(如具体价格、平台支持)暂未提供。