wjszxli

不可预知的视觉变化测试 – Pulsar – Medium

wjszxli · 2017-01-16翻译 · 756阅读 原文链接

第一部分中,我解释了我们如何使用单元测试来验证我们的设计生成的系统组件并匹配我们期望的版本从一个到另一个。在这部分,我将展示如何检查这些组件的可视化 表现。


那我们重新从一个组件开始

千万要记住哦?

我们的小按钮可能会有8种主要的颜色的变化,比如 btn--primary, btn--success, btn--danger等等,他们也会有许多的修饰符,就像是btn--outline, btn--small, btn--naked 或者 is-disabled ,对啦,在有的时候或者一般情况下甚至于任何时候,都不能忘记active, hoverfocus,明白不?

如果你想要一个小的,可以自由关闭的,轮廓按钮,跟着我来做

不要按照UI的应用顺序来做,有些类是优先于其他类的,这是一个很大的视觉变化检查,我们会保护默认下的状态组合,因为这样会符合WCAG 2.0色彩对比标准,这样也会能够满足我们大部分用户的界面 ...所以,如果你使用...

`btn btn--primary btn--outline btn--small btn--disabled`

…它应该导致相同的视觉样式为…

`btn btn--disabled btn--outline btn--small btn--primary`

为了验证这一点,我已经设置了按钮的网格,映射出类的各种组合,所以我们可以通过他们在视觉上扫描,同时检查他们的互动状态。

只是众多按钮中的一个

我有一整页的按钮组合,事实上有384个主题,所以这么多是希望任何人都可以直观的检查每个发行的版本,以确保一切都还没有改变,乘现在有空我们视觉回归测试一个 🙌

还记得我们以前在PHP测试框架使用的固定文件头?我用的是BBC’s Wraith tool来采取每一张图片。Wraith使用的是WebKit的无头版本,并存储这些图片作为视觉基线的定义和验证,我们希望未来的图片呢狗匹配这些标准; 除非我们在制作过程中明确的变化。

我们每次更改样式表我们可以重新运行Wraith,进行第二组快照,然后自动相互比较和报告任何差异,无论多么小。

这意味着,如果我们384个按钮突然得到了一个不同的标签颜色,Wraith会及时通知我们。如果其中一个按钮突然变得宽1像素,Wraith也会告诉我们。

> Wraith就像是恼人的同事靠在你的肩膀上,当你问他的时候,他会指出最微小的差异,多么美好

###来,我们来玩个游戏?

这是两个截屏按钮网格,但我做了一个改变,你能看到它吗? 不要向下滚动太多 ,直到你看到有一个很好的看为止

不要再滚了,你能告诉我它是什么了吗?


看出来了不?

我的确看不出来,但是 Wraith 可以!

Wraith: “What the f… m8??”

我将裸色按钮的标签颜色减轻了1%,太小的差异能够测试我的眼力,但是这需要足够久的注视着电脑,诚然,我不得不请Wraith来帮忙,让他告诉我们这个小的差别(你可以告诉他使用一定的比例的模糊因素),但我想做一个点。

最后结果是显示失败,但失败实在是一个强大的词,因为他们只是“差异”,也将由我们来决定这些差异是否是有意的。我们甚至给身边的HTML检查也会有发现有差异。

失败的画廊

花费一些时间建立一个安全网

如果你工作在一个设计系统,如果花费一点时间学习和建立一个工具,像是Wraith,将会大量减少你去手动检查每次你组件做出改变的时间,,它会释放你更多的信心,不会让意想不到的变化泄露给其他组件。

>没有人喜欢的风格

我们不使用视觉回归测试失败的构建,但这是成为一个极具价值的安全网来运行或执行提交更改之前来释放我们的设计系统。我们都有这样的问题,一个改变CSS一个地方的改变,我们却不曾预料到影响了其他组件,Wraith却会帮助我们抓住这些。

我们很幸运能够进入数以百计的辅助测试在Wraith上,让他们和我们现在添加测试用例(如按钮网格)纯粹的视觉回归一起测试。

最后,我发现最大的好处是在重构。我更有信心在做大规模的改变,因为我可以运行我的视觉测试和使用Wraith检查我所有的组件。

> 更多文章,请看本人博客:http://www.wjs.photo

相关文章