SuperAPI AI 工具集

sanity-visual-regression

测试与质量

查看项目

更新于 10-16 05:44

技能介绍

用途:为 Sanity monorepo 增加、审查和维护 Chromatic 视觉回归覆盖。视觉回归通过 .github/workflows/chromatic.yml 运行,共三个快照来源,各自对应一个 Chromatic 项目与仓库密钥:dev/storybook 故事(sanity studio,CHROMATIC_PROJECT_TOKEN_STORYBOOK)、Vitest 浏览器测试(sanity studio vitest,CHROMATIC_PROJECT_TOKEN_VITEST)、Playwright e2e 的 takeSnapshot()(sanity studio playwright,CHROMATIC_PROJECT_TOKEN_E2E)。

主要能力与规则:状态按到达方式归属不同来源,且不应跨来源迁移。仅靠 props/fixtures 或一次 play 交互可达的状态放入所属包的 *.stories.tsx;需要驱动 UI(输入、拖拽、剪贴板、焦点、视口、服务端命令)的状态放入 *.browser.test.tsx,其结束状态即快照,测试中可用 takeSnapshot('state name') 获取中间状态;整站界面真实部署与数据集使用 e2e/studio-visual-test.ts 的 Playwright 规格,仅限只读状态。浏览器测试的内联 harness 不要导出为故事,e2e 规格不要放进 dev/storybook,也不要跨源上传快照。

使用方式:写覆盖前先运行 pnpm visual-coverage <path> --prs;故事文件放在所属包 src 树内(常在 tests),需 studio 上下文时用 packages/sanity/test/browser 的 TestWrapper/TestForm。本地用 pnpm dev:storybook(端口 6006)并运行 pnpm --filter sanity-storybook test。浏览器测试通过 configure({disableAutoSnapshot:true}) 关闭自动快照(作用域跟随调用位置),用 await takeSnapshot() 定向截取,并以 settleChromaticEndState() 收尾,使悬停/焦点状态明确。

限制:burn-in 期间所有检查非阻断(exitZeroOnChanges),合并到 main 会自动接受基线;chromatic.yml 两个来源仅在带 trigger:chromatic 标签的 PR 上运行,推送到 main 始终运行。Playwright 快照须在确定性时刻手动 opt-in,避免 diff 噪声。故事需保持确定性,不得渲染实时时间戳、随机 id 或未完成加载态,可按参数使用 disableSnapshot、delay、modes 等。其余如本地采集、TurboSnap、分片与成本控制见 REFERENCE.md。