logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 👀 视觉回归测试
  • 为什么禁用日期这么难?
  • 封装 Form.Item 实现数组转对象
  • 行省略计算
  • 📢 v4 维护周期截止
  • antd 里常用的 TypeScript 工具方法
  • 一个构建的幽灵
  • 当 Ant Design 遇上 CSS 变量
  • API 的历史债务
  • 灵动的 Notification
  • 色彩模型与颜色选择器
  • 主题拓展
  • 虚拟表格来了!
  • 快乐工作主题(一)
  • 动态样式去哪儿了?
  • Suspense 引发的样式丢失问题
  • 打包体积优化
  • 你好,GitHub Actions
  • 所见即所得
  • 静态方法之痛
  • SSR 静态样式导出
  • 依赖排查
  • 贡献者开发维护指南
  • 转载-如何提交无法解答的问题
  • 新的 Tooltip 对齐方式
  • 非必要的渲染
  • 如何成长为 Collaborator
  • Modal hook 的有趣 BUG
  • antd 测试库迁移的那些事儿
  • Tree 的勾选传导
  • getContainer 的一些变化
  • 组件级别的 CSS-in-JS

👀 视觉回归测试

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

视觉回归测试(Visual Regression Testing)是一种软件测试技术,专注于检测 Web 应用程序或网站的用户界面中的视觉变化和差异, 它涉及在不同的开发阶段捕获网页的屏幕截图,并进行比较,用来识别由代码更改或更新引起的任何意外的视觉回归。

基准截图

Ant Design 视觉回归测试的主要目标是检测组件的视觉变化,避免 PR 改动引入的视觉问题。我们使用 jest-puppeteer 作为测试框架。将 Puppeteer 与 Jest 结合使用,对每一个组件 Demo 进行截图,然后与基准截图进行比较。

可以看到每个组件下的 __tests__/image.test.ts 里面包含了视觉回归测试的代码, 你可以通过以下命令在 antd 仓库中运行视觉截图:

bash
npm run test:image # 截图将会保存在 imageSnapshots 目录下, 指定组件截图可以使用 npm run test:image -- components/button

视觉回归方案

Argos

早期我们使用 Argos 作为视觉回归测试的方案,但是 Argos 修改了收费策略,antd 在每次 PR 中都会触发视觉回归测试,每次对比将近 6,000 张截图,这样的费用是我们无法承受的。

Self-hosted

我们自建了视觉回归测试的方案,利用前面提到的 jest-puppeteer,将每一个组件的 Demo 分别使用 dark、light、compact 以及 cssVar 四种主题进行截图,然后将截图上传到 阿里云 OSS 中,作为基准截图。

利用 GitHub Actions 持续集成,可以在每次基准分支的代码变动时,自动截图并上传到 OSS 中,这样就保证了基准截图的实时性。

对于需要进行视觉回归测试的分支,我们使用 pixelmatch 将当前截图与基准截图进行比较,如果有差异,将会生成差异截图,并将差异报告上传到 OSS 中。

进一步利用 GitHub Actions,实现在 PR 中对比基准截图,如果有视觉差异,CI 会将 PR 中的差异截图和报告上传到 OSS 中,在 PR 中展示视觉差异,同时标记为失败,需要开发者进行修复。

https://github.com/ant-design/ant-design/pull/52210#issuecomment-2567659292

本地视觉回归测试

在本地开发,准备提交 PR 贡献时,我们也可以通过以下命令来事先进行视觉回归测试:

bash
npm run test:visual-regression:local # 按照提示选择组件进行视觉回归测试

以上

  • 视觉回归持续集成方案,可以参考 .github/workflows/visual-regression-*.yml
  • 基准截图实现,可以参考 tests/shared/imageTest.tsx
  • 视觉回归测试的代码实现,可以参考 scripts/visual-regression