用途:用 Playwright 常规 e2e 测试验证组件,不引入额外测试运行器、打包器集成或 npm 包。
主要能力:story 是嵌入被测组件的小包装组件,放在组件旁 .story. 文件中,每个命名导出为一个 story;gallery 是单页,暴露 window.mount(params)/window.unmount() 将 story 渲染到 #root;测试使用 @playwright/test 的内置 mount(storyId, props?) fixture,返回 #root 的 Locator。支持用例内多次 mount、update(newProps) 在不重挂载下测 prop 变化、page.route() 网络模拟、截图对比,以及可选类型(显式 story 类型或 Vite 插件生成 gallery 类型)。
使用方式:检测框架与打包器。Vite 项目由现有开发服务器在 /playwright/gallery/index.html 提供 gallery;其他情况运行独立 dev server 并设置 baseURL。在 playwright.config.ts 增加 projects(testDir、baseURL、serviceWorkers:'block'、reuseContext:true)与 webServer 配置,端口与开发服务器一致。运行 npx playwright test --project=components。
限制:组件所需一切必须在 story 内设置、断言内容必须通过页面可观察;props 需为可序列化纯数据,回调由 story 内部处理;gallery 需按 references/gallery-spec.md 自行实现;Vue story 还需运行时声明 props。