色1.0 -连续的UI测试的反应

UI组件和库的自动可视化测试

加载
多米尼克阮
@domyen

TLDR: 十博体育备用网址推出 色1.0 今天! colour从提交到提交监视React UI组件的外观,并自动通知您视觉变化. 自动化可视化QA可以节省时间. 您可以通过避免昂贵的bug修复来节省资金. 为 故事书 故事书的维护者.


用户界面很难测试. 开发人员不断地问同样的问题:这看起来是否正确? 什么改变了? 这是如何通过QA的?

多年来,不同的方法试图通过编程测试UI细节,但都没有取得多大成功. 越过队友的肩膀看是检查设计是否正确的最快方法.

但是手动UI测试是荒谬的. 生产应用程序有太多的边缘案例,以至于它不经济——更不愉快. 大多数团队最终都会测试一些核心用例,并忍受其他地方大量的回归. 随着应用程序复杂性的增加,回归只会变得更糟.

有更好的办法. 我很激动地宣布 色1.0, 一个持续的UI测试工具,它结合了手动测试的准确性和自动化的效率. 请继续阅读详情.

Eick等. 2001, 波姆2001, 美国宇航局2004年, 波姆1988

UI漏洞的代价是非常昂贵的

开发人员平均要花费21%的时间来修复软件漏洞. 让这一点深入人心. 8小时. 每个星期.

如果您像我一样以构建ui为生,那么您已经浪费了无数时间来修复漏洞. 您可能已经尝试过自动化UI测试,但现实情况是,可视化测试通常不存在于开发工作流中,因为没有有效的工具(直到现在)。.

更重要的是,UI漏洞将很快耗费更多的时间和金钱. 紧急前端最佳实践意味着大多数软件bug将转移到视图层,每个bug将对UI产生巨大影响.

“重型”前端使调试更加困难

前端的复杂性正在飞速增长. 可重用api与个性化趋势相结合, 客户端状态, 响应性导致更多的前端业务逻辑. 这意味着开发人员有更大的机会引入更多的缺陷,这些缺陷在调试过程中非常耗时.

bug会在组件化的ui中引起连锁反应

组件导致连锁反应,传播bug

现代视图层使得从简单的组件构建复杂的ui变得容易. 但是使这些好处成为可能的组件构造也增加了缺陷扩散的可能性.

持续交付使得部署bug变得太容易了

向持续集成和交付的转变是不可否认的. 开发人员喜欢自动化构建-测试管道,并且能够更快地发布. 但这缩短了可视化的QA时间窗口,使偶然部署UI回归更容易.

在现代ui mino中r的变化S可能会引发广泛的错误,这些错误很难发现,也很难快速部署.

测试ui的更好方法

我和我的团队调查了来自Priceline等公司的数百名开发者, Auth0, 期间和阿波罗 彩色的私人测试版. 十博体育备用网址意识到,所有人真正想要的是构建漂亮的ui,而不是担心其他的.

没有人喜欢编写脆弱的UI测试、手动可视化QA或在生产中修复回归.

想象一下这样一个世界:您构建UI组件并免费获得自动化的可视化测试. 考虑这样一个工作流,您可以立即知道代码调整对UI的影响.

如果你能持续监控视觉变化, 当UI回归发生时,您就能够检测到它们. 这将帮助您的团队在用户在生产过程中遇到UI bug之前,在开发过程中查明并修复它们. 你可以在提供防弹ui的同时节省时间.


介绍React的连续UI测试

开发人员已经在整个堆栈中自动化了测试. 那么,为什么十博体育备用网址还要继续忍受手动可视化QA或使用史前工具来测试现代ui呢?

汤姆, Zoltan,我开始构建一个用于React等现代视图层的连续UI测试工具. 为基本UI构建块(组件)自动化可视化QA.

在组件级进行测试有助于查明UI回归的原因(很像单元测试),同时避免页面级工具容易出现的误报.

是的,这意味着你终于可以告别令人麻木的手动视觉QA了.

使用chromate,测试可以从故事书中自动生成,并在您推送代码时在云中运行. 您可以通过pull request和CI得到可视化更改的通知,因此您可以放心地发布ui. 继续读下去,看看它是如何运作的.

📸捕捉云

色是一个 故事书 插件,可视地测试你的组件在云中,每当你推代码. 它支持React、Vue、角和所有故事书.

Code, 样式, 每个组件的资产在受控制的浏览器环境中按需呈现,然后进行快照. 快照被锚定在提交和分支上,以使比较更精确.

测试速度快如闪电. 不存在工作队列或并发瓶颈. 您的测试尽可能快地运行. 在实践中, 十博体育备用网址的并行基础设施意味着数百个, 甚至成千上万的故事在一两分钟内被测试.

🔍Diff探测器

通过将最新的快照与基线(故事的最后一个已知的“良好”状态)进行像素级的比较,可以发现组件的变化. 当检测到更改时,您将在一个pull请求或电子邮件中得到通知.

通过三个不同的视角(一次一个)查看彩色应用程序的变化, 并排, 差异),每个突出的视觉差异在一个独特的方式. 代码差异也来自于所呈现的UI,以帮助您跟踪对DOM元素的更改.

想要深入了解它的外观和感觉? 复制非常简单,因为真正的代码, 样式, 每次提交时,资产都与可视化快照一起被索引. 这意味着您可以检查代码或将组件倒回到历史上的任何时间.

✅合并经理

“我喜欢保持测试”从来没有人说过. 颜色测试自我愈合. 当您接受一个快照时,您将更新可视化基线,并将其延续到未来的测试中. 当您的团队接受快照时,您的UI测试自然地与组件一起发展.

彩色了解Git. 一旦快照在彩色中被接受, 在它发生变化之前,不需要重新接受它, 即使是通过git分支, 和合并.

协作是彩色工作流的核心部分. 同步帐户权限和访问GitHub, Bitbucket,或GitLab在1-click. 这允许您快速循环关键涉众以获得第二双眼睛.

"我喜欢维持测试"从来没有人说过

彩色是你共享的真相之源

需要一个团队来构建产品UI. 和你一样,十博体育备用网址理解随着团队和范围的扩大,沟通会中断. 这就是为什么十博体育备用网址还为团队生成一个通用的参考点:组件库.

在chrombook中的每个项目都有一个相应的在线组件库. 这个库包含了每个组件的代码和可视化基线 提交和分支. 这为你的团队提供了一个共享的空间来引用你所制作的任何组件.

组件库可以帮助你做更多的事情

这还不是全部. 组件库对于团队来说是一个未开发的机会,可以节省更多的时间和金钱. 重用组件可以提高40-80%的生产率.

Morad 2005

持续的用户界面测试可以帮助你加固组件. 组件库可以帮助您发现和重用这些相同的组件,以更有效地构建ui.

对UI bug说再见吧

开发人员不应该在繁琐的手动QA和昂贵的UI漏洞之间做出选择. UI测试应该像测试套件的其他部分一样,是开发工作流的一个持续部分.

彩色 你可以告别UI漏洞,节省时间,更快地发布防弹组件. 现在就注册你的30天免费试用吧.

👉 在这里了解更多关于半音的知识👈


常见问题

彩色的工作与故事书?

是的,彩色是由故事书的维护者为故事书制作的. 十博体育备用网址的整合是无懈可击的. 它也可以工作没有故事书通过 运行时API.

彩色仅仅是为了反应?

不. 半音也适用于Vue, 角, 聚合物, 原始HTML, 虚构的, MarkoJS, 以及几乎所有故事书支持的东西.

为什么要在web应用和页面中测试组件?

页面级测试对于组件化的ui不是很好. 组件可以跨多个页面重用. 如果一个组件发生了变化,它通常会在使用它的每个页面上触发有噪声的测试失败. 这些是假阳性,因为它们没有告诉你是什么导致了变化.

组件级的可视化测试使得确定测试范围和识别回归更加容易. 组件构造是使连续UI测试更精确、更稳定的关键. color是为UI组件设计的唯一工具.

在云中测试有什么好处呢?

速度、协作和一致性. 云支持大规模的并行化, 打开了协作在线审查流程的大门, 并为十博体育备用网址提供一致的浏览器环境来渲染组件.

本地测试很慢——即使是小的组件库. 它们是不一致的,因为每个人的开发环境是不同的. 而且由于测试只在一台机器上运行,因此在审查上的协作是不可能的. 简而言之,对于从事关键应用的高效团队来说,它们是不理想的.

这与开源工具相比如何?

开源库是免费的,免费是有吸引力的. chroms建立在开源最佳实践的基础上(十博体育备用网址也为OSS做贡献),并为专业开发人员提供了节省工作的特性,比如云性能, 在线协作, zero-config分支, 无痛的合并, 一个组件库, 以及更多现成的功能.

它能取代硒或柏树吗?

彩色互补端到端(E2E)测试工具,如Selenium和Cypress. E2E测试对于QAing“快乐路径”非常棒, 但它们很难创建,需要大量的维护. 对于视觉测试覆盖率来说,它们的价值很低. 不需要编写更多的测试就可以扩展UI覆盖范围.

这和《十博体育网站》相比怎么样?

Jest和Enzyme测试非常适合测试应用程序的功能,但不包括所呈现的UI. 色差是用来检测视觉回归的. 笑话、酶和色是互补的.

这不只是快照测试吗?

不,这是不一样的. 快照测试捕获您的组件 呈现 code. 十博体育备用网址捕获 外观呈现. 这一点很重要,因为:

  1. 浏览器呈现UI的方式还取决于样式和图像等资产. 不像代码快照, 彩色在浏览器中呈现UI,以捕获用户实际看到的图像.
  2. 改变不一定是“失败”. 当您只有标记差异时,从bug中识别有意的UI更改是很困难的. 十博体育备用网址帮助您可视化、检查和合并UI更改.
  3. 代码更改并不总是导致UI更改. 代码快照测试仅识别代码中的更改. 这最终会产生大量的误报. 彩色就没有这个问题.

你是谁?

色是 汤姆·科尔曼, Zoltan Olah, 多米尼克阮. 目前,十博体育备用网址的团队还帮助维护最流行的组件浏览器 故事书. 之前,十博体育备用网址帮助设计和设计了广受欢迎的开源软件 阿波罗 GraphQL工具链和JavaScript框架 流星. 在那之前, 十博体育备用网址经营了一家精品前端代理公司,为苹果等公司提供咨询, 哈瓦斯, 和Yummly.

你赞助开源项目吗?

是的. 合格的开源组件库可以免费使用! 通过应用程序内聊天或推特写信给十博体育备用网址提交你的项目 @hi_chroma.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

为什么Chroma要落后于故事书

欢迎诺伯特·德·兰根和迈克尔·希尔曼来到Chroma
加载
Zoltan Olah
通过彩色
面向专业UI开发人员的深入指南和教程,来自故事书团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10