原文地址，未经作者确认或授权的翻译版本。

摘要

从CSS3开始，自适应设计会推动视觉和CSS测试的进展，PhantomCSS 是众多支持这个UI测试改变的新工具的一员。

为什么？

无论有没有样式规范，我们都在进行视觉测试。执行一次人工测试还可以接受，那不断重复的呢？对于一个丰富的界面设计，一个自适应设计或者一个复杂的应用，人工回归测试的风险和消耗会更高。没有人愿意因为一些padding改变就对一个页面做对于不同视窗大小的重新测试。

一些长期项目很快就仅仅因为修改CSS而不影响现有布局的困难而变的越来越组织混乱与庞大。CSS的延展性，修改、添加或者删除样式的能力是至关重要的。只有人工测试的CSS重构是不恰当的，CSS自动测试可以使CSS重构变得更轻松。

CSS可回归性是比较难来定位的，一些情况是由于对设计无感，更多的是因为被破坏的页面当前没有处于开发阶段。自动测试才能更快更简单的发现这些回归测试点。

有一些对于CSS测试的错误概念，认为使用XPath或者CSS选择进行一些元素存在的断言就达到了样式测试的目的。仅仅因为.red-button存在，不一定意味着它是可见的，也不一定就能断定这个按钮是红色的。button {background:blue !important}可以很容易改变它的颜色。同样的selenium.isVisible("*[cantains(@class "red-button")]")也不能证明这个元素是可见并且样式准确；这只是证明了此元素不含有display:none这样的样式，但是没有办法考量z-index或者位置。做样式测试不仅仅是做HTML标记的断言。

怎么做？

要进行CSS自动测试，有两种方式。第一种是截屏比对；第二种通过JavaScript调用window.getComputedStyle()获取计算后的样式并进行断言。这两种各有明显的优势和不足。 第二种方式强绑定了实现，从而变得可能比较脆弱。 第一种方式离设计太近了，当页面中有可变内容时就会有问题。

作者更倾向与截屏比对；它的测试基于用户所见而不是用户所见的抽象。对于可变性的问题，有两种解决方案。第一种是不要测试页面自身，而是测试页面的静态版本，使用一样的CSS，不同但是不变的内容。针对内容发布的不同形式，每次测试可以通过数据库配置来实现，使用JavaScript来Mock API返回的结果，或者在CMS中做一个只有固定数据的分枝可以达到此目的。如果你足够幸运，有一份在线样式规范（例如，使用生产环境的CSS生产的HTML），那么强烈建议可以只使用这个进行测试。

PhantomCSS介绍

PhantomCSS 是一个命令行工具，作者为了基于截屏比对的CSS测试而开发了它，并且使用PhantomJS和CasperJS为Huddle提供了功能测试套件。为了使对UI的隔离的测试，作者Mock掉了ajax请求。在功能测试中国年对UI的完全控制，使得视觉测试变得相对简单。

下面是使用PhantomCSS进行测试的一个样例

casper.
  start("https://my.testpage.com").
  then( function should_look_like_this(){
    phantomCSS.screenshot('.my-css-selector');
  }).
  then( function user_clicks_link(){
    casper.page.sendEvent('click', 10, 10);
  }).
  then( function should_look_different_than_before(){
    phantomCSS.screenshot('.my-css-selector');
  }).
  then( function now_check_the_screenshots(){
    phantomCSS.compareAll();
  });

上面的代码对一次点击事件页面的改变进行了测试。它生成了对于页面的一部分的截屏，使用CSS选择器.my-css-selector进行定义。每次运行时，都会生成一个截屏，与原截屏进行比对。一般不会有什么区别，如果有，PhantomCSS会生成一个diff图片来反馈。下面的图片展示了一个失败的测试的三个截屏。

image.png

失败的图片显示出因为字体大小的不同而产生的一些差异，Click me的竖直方向的对齐也有一些问题。图片使用粉色标识出了区别。

通过PhantomCSS，可以发现一些问题。开发团队通过视觉测试以及在不同设备上的基线截屏，可以发现因为反锯齿、原生表单域以及CSS animation 以及transition而造成的样式不同。不同的操作系统和设备都可能造成测试失败。PhantomCSS在图片比对时可以忽略反锯齿、忽略动画或者隐藏有问题的元素。

其他

PhantomCSS不是CSS回归测试唯一可选的工具，作者也强力推荐下面的这些。

GhostStory, Cactus, Needle, CSSCritic, fighting-layout-bugs, sikuli, Mogo

未来

由于Ajax以及重JS客户端的SPA的出现，作者认为没有测试的富交互应用变得非常不可靠。自动视觉回归测试变得很重要，且迫切需要。随着Web技术的发展，作者很确信视觉测试的工具也会随之演进和应用。而且我们不应该只关心界面，对于CSS3的keyframe animation, canvas, WebGL又怎么办呢。作者认为Web前端的变革，必然带来Web UI测试的变革。

本人感想

本人也算经历了很多Web UI端的开发工作，Web自动化测试时Web开发必不可少且越发重要的一环，这点时毋庸置疑的。不过视觉回归测试、视觉还原度测试倒是未曾经历过，这个观点提出了也有几年了，未曾听任何业内人士说起过，不知是自己孤陋寡闻还是这个概念已经落伍。

现在看起来视觉回归测试、诗句还原度测试。对某些应用可能是可行的，例如某些前端制图软件，某些大数据，地图相关报表软件。还是可能期望对视觉还原后的效果有所限制的。

这样的一个观点现在才听说，竟然觉得还有些新颖，也是醉了。

以上。