选择正确的视觉回归测试工具

直观地比较视觉回归测试工具,帮助你找到适合你应用的测试工具

如果你想用视觉回归测试你的应用UI,你可能会遇到很多选项.

从开源库到成熟的产品, 有很多选择都承诺能够抓住UI漏洞. 为您的项目找到正确的十博体育备用网址可能非常耗时, 所以十博体育备用网址收集了一些信息来帮助你找出哪种视觉工具适合你.

请继续阅读可视化回归测试工具的概述, 包括功能, 工作流, 和定价. 十博体育备用网址希望这能帮助您找到项目的最佳测试十博体育备用网址.

网站vs网页应用

大多数视觉回归测试工具被设计用于在页面级测试网站. 它们是为营销页面、博客和新闻网站而设计的.

应用程序团队发现的问题是,视觉回归测试一个多状态的web应用程序与测试一组静态页面非常不同. Web应用程序根据用户输入和上下文生成无数UI排列. 因为管理所有这些排列是很麻烦的, 像React这样的现代视图层, Vue, Angular的存在是为了帮助你把复杂的应用ui划分成简单的模块化组件.

不幸的是, 使用古老的页面级测试工具测试组件构建的web应用程序,会导致大量的误报,你必须从中挖掘出真正的变化.

这样的支付工具 Applitools, 珀西, 筛选器 为测试页面提供功能. 但是用于测试静态站点的特性对于组件化的应用程序通常不是很有用. 像傀儡师这样的开源工具, BackstopJS, Jest映像快照 范围是否更严格,所以它们不能涵盖专业团队遇到的整个测试工作流程.

十博体育备用网址开始使用色卡是因为十博体育备用网址厌倦了复杂的回顾流程(或者根本没有), 假阳性, 一堆十博体育备用网址不需要的功能, 痛苦的集成, 无尽的维护, 测试污染项目回购的规格.

Alt文本

colour.com的核心是跟踪和视觉回归测试 组件 -应用程序的基本构建模块. 组件级的测试使得在web应用程序中定义测试范围和识别回归更加容易(就像单元测试可以帮助你定位功能缺陷一样).

更重要的是,组件级的测试比其他的测试要快得多. 着色公司的基础架构能够有效地并行运行您的所有测试, 无论您运行了多少构建, 或者你写的故事. 例如,客户通常在不到一分钟的时间内测试2000多个排列.

色, 每一个 应用程序中的组件被跟踪 每一个 提交,这样当你推送代码时就可以捕捉到UI的变化.


付费视觉回归测试工具vs开源库

很明显,开源库是免费的. 免费是很有吸引力的. 那么,付费视觉回归测试工具和开源库之间有什么区别呢?

付费和开源工具都依赖于可视化的图像比较技术来发现差异, 但相似之处就到此为止了.

下面是一个快速的比较 彩色,一个付费的视觉回归测试工具.

支付(彩色)开源
性能✅快速:测试在云中并行运行,因此开发人员可以获得几乎即时的测试结果.慢:在本地开发机器上运行测试,或者需要在其他地方运行额外的工作.
协作✅帮助团队一起检查UI更改. 在线评审过程允许团队成员评审和确认更改,而无需提取代码.不适用于多个开发人员. 每个开发人员都必须拉出代码并重新运行测试来评审.
CI & Git工作流✅无缝的Git和CI工作流集成,通知和PR状态.NA
分支机构 & 合并✅通过单独跟踪每个分支,支持在多个分支上工作. 直观的工作流程合并UI更改.支持不同
复制品✅很容易复制,因为每个组件的真实代码、样式和资产都是在线索引的. 不需要Git.检出分支并运行代码以重现更改.
历史✅跟踪每个组件的版本,所以浏览不同的版本是快速和容易的.NA
存储✅快照自动在线索引.快照在你的存储库中(repo膨胀). 或者并行运行,这需要额外的主机并保持它们的同步.
开发人员的经验✅完善的用户流程和省时功能贫乏的UI / UX
维护✅24小时支持和频繁更新你的团队必须维持
部署✅一个专门的团队不断监控和提高服务的性能您的团队必须管理部署和停机时间

你应该选择哪一个?

这取决于项目和团队. 如果你是一个专业的开发团队,正在开发一款重要的应用, 付费十博体育备用网址的省工和协作特性是必须具备的. 例如, 对于小型团队和中等规模的组织来说,色差在几天内就能收回成本.

如果你是一个普通应用的独立开发者,或者是一个种子阶段的初创公司,其产品不断变化,那么你可能会想要看看开源选项.


开发团队vs个人开发者

这需要一个团队来建立 和维护 一个全功能的应用程序. 像你这样的, 十博体育备用网址明白,随着团队和项目的扩大,复杂性会增加,沟通也会变得混乱. 不是每个人都认识到视觉测试是一个团队活动. 你可能会问设计师:“这个看起来对吗??或者QA人员:“你能打破这个吗??”

有很多选择,但很少是为团队工作流设计的. 像BackstopJS这样的开源库, 傀儡师, Webdriver则专注于独立开发者的体验. 它们的作用域是为了在本地机器上进行测试,但当在团队中使用时,很快就会变得缓慢和阻塞.

团队需要合作

像色块这样的工具从一开始就是为协作而设计的. 每个人都可以通过在线合并管理器参与UI审查过程. 多个开发人员可以同时在多个特性分支上工作. 当合并的时候,这个过程是无痛的.

工程师, 设计师, 产品经理可以在线浏览组件库,而不需要调用代码, 迁移, 或者维护一个开发环境. 不要再说"这在我的机器上行不通".

与你的团队一起回顾


多少个分量?

“如果我没有呢? 许多组件?"

视觉回归测试的一个常见问题是它的优化过早. 这种思维过程通常是这样的:

很容易假设视觉回归测试只针对已建立的组件库. 不正确的. 一个单独的组件可以真实地存在于应用程序中的数百个地方. 做一个微小的调整将传播到所有使用组件的地方. 这是一个巨大的前期风险!

小的调整会导致大的倒退

不管你有一个还是一百个组件都没有区别. 当评估视觉回归测试时, 首先要考虑组件被重用的次数,而不仅仅是组件的总数.

尽早开始测试UI组件

测试UI组件的好处是——即使您没有很多UI组件——可以确保您的组件看起来与预期的一样 所有的地方 他们使用. 即使你很少做出改变,你所做的改变也会产生巨大的影响. 可视化回归测试的节省工作效果与组件库的采用和大小相结合.


你使用像故事书这样的组件资源管理器吗?

故事书是一个 组件的探险家 帮助前端团队发布UI组件. 作为故事书的维护者和赞助商,十博体育备用网址理解故事书对应用团队的重要性.

着色与故事书的一流集成意味着开发人员可以重用他们的故事作为视觉回归测试,而无需额外编写新的测试.

在半音上查看你的故事

每个故事都是一种考验

彩色测试将你的故事一一对应. 每当您更新一个故事时,您的测试都是同步的. 这意味着视觉回归测试可以轻松地保持最新.

你的故事书会自动上传

每次你推送代码的时候,故事书中的组件都会被上传到色块. 这意味着团队中的每个人都可以参与评审. 不需要拉动代码.

复制品

色差并不只是捕捉每个组件的图像, 它是对组件DOM的活的再创建, 样式, 和资产. 每当您检查更改时,您都会看到完全可检查的高保真组件. 这使得复制和确认组件更改变得轻松,因为您可以准确地看到用户的情况.

没有分支和合并的麻烦

共同或单独开发功能. 通过分支和合并, 您可以根据需要创建任意多的功能分支,并将它们无缝地合并到生产中. 这一切都发生在幕后,而且很有效. 不需要配置.

选择组件的版本


获得免费手册

想了解更多关于视觉回归测试的知识? 看看为什么像Slack这样的公司会采用视觉回归测试, 孤独星球, 和沃尔玛. 查看十博体育备用网址的免费31页 视觉测试手册.

视觉测试手册封面


准备好尝试彩色?

使用视觉回归测试工具有很多方面需要考虑. 十博体育备用网址希望这篇指南能让你更清楚地找到合适的工具.

尝试着色是很容易的,安装插件和设置您的项目在不到一分钟. 免费的计划. 不需要信用卡. 现在报名.

©十博体育网站
由故事书的维护者制作
友情链接: 1 2 3 4 5 6 7 8 9 10