------自动化“视觉抽查”，避免尴尬的生产错误。

大约一年前，Alex Sexton 在 Smashing Magazine网站的一篇文章里重点阐述了一个新角色：前端运营。这个角色产生于互动世界前端工作越来越复杂的背景之下。文章发表以后，一些工程师在旧金山举行了一场关于前端运营的专题会议。Cris Ruppel还向drupal社区贡献了类似的角色以及支持工具。我自己第一次接触前端运营这个概念是在Ruppel在去年badcamp的一次讲话上。因为我自己是网站“自动化”和“一致性”的粉丝，也一直不留情面的修正我的开发工具链以使他们能更有效的工作，所以自然的，他的讲话引起了我强烈的兴趣，使我想要了解更多。当然这个概念还在发展中，因为前端工具总是变化的很快，不过最近有一个工具我特别喜欢，它叫做：Resemble.js。

 简单点说，把两张图片给Resemble.js，他能够产生出第三张图片，这张图片会重点标出那两张原图的不同之处。为什么这个技能让人兴奋呢？因为配合合适的支持工具，我们可以用它来做基于图片分析的CSS回归测试。下面是我用这个技能做的一个简单的例子，使用的是lullabot.com网站。在一个pull请求中，我稍稍改变了SASS语言，把网站的字体从Proxima改成了Helvetica Neue，尽管不是恶意的，这些改变还是在排版上造成了各种混乱。还有，我的改变使旋转相册从呈现的页面中消失了。你可以在上面的图片一中看到改变前后的网站样子，左边是产品本来的样子，右边是在服务器测试的样子。

如果你自己通过浏览器页面比较，你会发现pull请求引起的改变其实是相当细微的。稍稍不同的字体，间距的改变，消失的相册（而不是明显被毁坏的相册），很容易在质量检测中被开发人员忽略。幸运的是，使用Resemble.js,我们不用依赖排版敏感性来注意到这种回归。

 为了证明使用Resemble.js来比较这些不同有多么简单，我们来看上面图二中输出图:

我们很容易就能明显的感觉到有什么不对。采取全屏截图也许不是个好主意，因为他很有可能会产生误报（预测为正，其实为负）而且难于阅读不同的图片。不过，当网站出现大规模问题时，他能很好的抓住我们的眼球。

我们现在已经在许多项目中使用这种简单的方法，希望能够加速质量检测过程。对于每一个pull请求，我们用Resemble.js和PhantomJS 从已使用网站和自动建成网站截屏，截屏的方法以及图片的分辨率都可以根据我们的喜好任意改变。 产生的图片文件夹将会放在由我们的建设工具Tugboat 产生的一个github 自动评论里。这将使我们能够很快的查看一个pull请求，以确保我们没有在无意之中引起一些视觉回归的错误。

对于更为精细的视觉回归测试，我推荐PhantomCSS。PhantomCSS 是由Huddle社区会员贡献的一种工具，他也包含Resemble.js用于做图片分析和比较。PhantomCSS 能使用CSS选择器定位网页上的某一部分，这样使得测试更加自动化，也使结果更容易被理解。

那么如何开始最容易的使用Resemble.js服务于你的项目呢？我在node.js里写了一个小的命令行功能, 把它涵盖在一个使用简单的工具里。假设你已经安装了node.js和phantom.js，你可以通过检查git储藏区以及运行npm install安装所需附件来使用该工具。另外，为了能够设置不同图片的属性，我们还需要一个patch来整合最新的Resemble.js代码。截屏图片对比可以通过运行node resemble产生（http://example.com http://stg.example.com）。

真正产生图片的代码是比较直接的，一共有130行。使用node.js来写小命令行功能就像用一种简单有趣的方式来创造和个性化你的前端运营工作流程。我希望自己能写出更多的小工具，让我们的生活变得更简单一些。