最后更新 08-14-2026
分类:
Reviews:
Join thousands of AI enthusiasts in the World of AI!
VizDiff
VizDiff 会上传来自 GitLab CI 的 Storybook 构建，渲染每个故事的截图，并在组件像素发生变化时阻止合并。
通用截图工具比较整个页面。VizDiff 围绕 Storybook 故事构建，因此组件级别的差异会在 GitLab 合并请求中显示，包含旧版、新版、差异和并排视图。分支上的首次运行会将每个故事标记为“新”；同一合并请求上的后续提交只显示实际更改的故事。
已经在 GitLab 中运行 Storybook 的前端团队能从此自动化工作流程中获得最大价值。设计师和工程师共享基线，通过键盘快捷键浏览待处理截图，并在不离开审核界面的情况下将构建标记为批准或拒绝。GitHub 设置通过针对该平台团队的单独设置指南提供支持。
通过 GitLab CI 管道中的 npx @vizdiff/cli 上传 Storybook 构建
在合并请求提交上发布 vizdiff/visual-tests 提交状态
比较视图包括每个故事的旧版、新版、差异和双栏布局
第一个分支运行建立基线；后续提交仅显示更改的故事
Microsoft Entra SSO 登录用于组织管理的部署
GitHub 和 GitLab 设置指南，附带复制粘贴的 CI YAML 示例
专为 Storybook 故事设计，而非遗漏组件回归的全页截图。
GitLab 提交状态阻止合并，直到明确批准视觉更改。
CLI 上传只需额外一步即可集成到现有的 build-storybook CI 任务中。
差异、双栏和键盘导航加快审查数十个故事截图的速度。
自托管部署让团队可以将截图数据保留在自己的基础设施中。
需要在你的仓库中使用 Storybook 并拥有 Maintainer 权限以添加 GitLab CI 变量。
没有公开的定价页面，因此成本取决于你的组织的 VizDiff 部署情况。
域名权威度很低，表明这是一个较新或较小众的产品，第三方覆盖有限。
VizDiff测试什么？
VizDiff会在每次CI构建时捕获Storybook组件故事的截图。它将这些截图与已批准的基线进行比较，并突出显示像素级差异，帮助团队在合并前发现视觉回归。
VizDiff支持哪些Git托管平台？
VizDiff开箱即用地集成了GitLab合并请求，包括提交状态和审查链接。针对GitHub团队，还有单独的GitHub设置指南，涵盖拉取请求工作流程。
如何将VizDiff连接到GitLab CI？
在GitLab中添加一个名为VIZDIFF_PROJECT_TOKEN的CI/CD变量，构建Storybook到storybook-static目录，然后在管道中运行npx @vizdiff/cli upload。VizDiff会自动读取GitLab预定义的CI变量。
第一次运行VizDiff会发生什么？
在某个分支上首次运行VizDiff时，每个Storybook截图都会显示为“新建”，因为还没有基线。对同一合并请求推送另一个提交后，VizDiff只会标记UI实际发生变化的故事。
如何在VizDiff中批准视觉更改？
通过GitLab提交状态链接打开VizDiff审查页面，检查每个截图，然后批准或拒绝构建。VizDiff会在您做出决定后立即更新提交状态为成功或失败。
VizDiff需要个人GitLab授权吗？
不需要。VizDiff使用由管理员配置的部署服务令牌来读取项目元数据和发布提交状态。开发者通过组织的SSO提供商认证访问VizDiff。