前端自动化测试探索

背景

测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。

为什么需要自动化测试

一个项目最终会经过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本。自动化测试的收益可以简单总结为：

自动化的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次 数 * 维护成本

对于自动化测试来说，相对于发现未知的问题，更倾向于避免可能的问题。

可测试方向

首先本文不会探讨单元测试方向，因为单测已经有完善的工具体系。但前端开发中，除了一些框架和库，愿意去写单测的少之又少。另外单测维护成本较高，而且也没法满足前端测试的所有需求。
前端自动化测试可以在几个方向进行尝试：
• 界面回归测试 测试界面是否正常，这是前端测试最基础的环节
• 功能测试 测试功能操作是否正常，由于涉及交互，这部分测试比界面测试会更复杂
• 性能测试 页面性能越来越受到关注，并且性能需要在开发过程中持续关注，否则很容易随着业务迭代而下降。
• 页面特征检测 有些动态区域无法通过界面对比进行测试、也没有功能上的异常，但可能不符合需求。例如性能测试中移动端大图素材检测就是一种特征检测，另外常见的还有页面区块静态资源是否符合预期等等。

业界开源工具

工欲善其事，必先利其器。业界在自动化测试领域已经有不少优秀的框架和库，善于利用能事半功倍。

界面回归测试

界面回归测试常见的做法有像素对比和dom结构对比两个方向。

像素对比

像素对比基本的思想认为，如果网站没有因为你的改动而界面错乱，那么在截图上测试页面应当跟正常页面保持一致。可以跟线上正常页面对比或者页面历史记录对比。像素对比能直观的显示图像上的差异，如果达到一定阈值则页面可能不正常。
PhantomCSS

像素对比比较出名的工具是PhantomCSS。 PhantomCSS结合了 Casperjs截图和ResembleJs 图像对比分析。单纯从易用性和对比效果来说还是不错的。

不支持PhantomJS 2.0的问题
由于PhantomJS 2.0暂时禁用了文件上传，PhantomCSS默认不支持PhantomJS 2.0 。如果还是想使用可以修改源码中获取图片文件的方式，改为通过ajax获取同域名下文件的方式，具体可以参考ResembleJs官网示例。
如何测试多浏览器
如果想测试多浏览器下的兼容性情况，只需要拿到多个浏览器下的截图即可。多浏览器测试最出名的当属selenium , selenium可以自动化的获取多个浏览器下的截图，前端工程师来说还可以借助Node的webdriver 来轻松开发测试脚本。
但selenium的安装和上手成本要稍大些，而且对于多浏览器来说，各个浏览器之间的兼容性对比容易出错。不同浏览器截图可能一像素的偏差就导致截屏对比失败，多浏览器可能更适用回归性测试。
响应式页面测试
国外有人将像素对比应用到了响应式页面上，如果您针对PC和移动设备使用同一个网页，响应式测试可以很快的回归你的页面在不同尺寸上的页面是否正常。与单纯针对移动端开发的响应式不同，同时支持PC移动的页面更容易发生错乱。
例如BackstopJS 项目，便是通过PhantomJS、capserJS等工具在不同尺寸下截图然后根据resemberJS进行像素比对判断是否正常:

像素对比需要注意的问题
• 不建议对网站所有页面进行测试 这只会导致很容易出现告警，但不一定是错误。针对重复使用的组件和样式、容易出问题的区域测试更加有效
• 推荐测试区域而不是整个页面 整个页面的测试导致任何一点文字、图像等动态的改变都可能导致不通过，而且真正的错误可能由于图像太大而被阈值忽略。图像越大对比也越容易超时。
• 隐藏动态区域 在选择器对应的区域如果有动态元素，可以同样通过选择器来隐藏
• 界面对比只是一个环节，需与其他测试相结合 没有银弹，合理结合才是关键

dom结构对比

像素对比虽然直观，但动态元素居多且无法保证测试页面与线上页面同步时有所局限。@云龙大牛针对这个问题提供了新的解决方案page-monitor，根据dom结构与样式的对比来对比整个页面的变动部分。 使用效果示例：

通过page-monitor你可以很快的搭建一个监控系统，监控页面的文字、样式等变动情况。
像素对比和dom结构对比各有优势，但也无法解决全部问题。何不综合利用呢？FEX部门QA同事就结合了两种方式提供了pagediff平台，正在对外公测中！有兴趣可以体验一把吧~ http://pagediff.baidu.com
QA同学开发的平台都这么炫，作为前端怎么能不了解一点测试知识呢？

用户操作测试

上面提到界面回归测试无法取代功能测试。即便是界面正常，功能正常也是必须关注的部分。最直接的功能测试就是模拟用户操作，通过模拟正常的操作流程来判断页面展现是否符合预期。
Phantomjs、CasperJS
大名鼎鼎的PhantomJS当然要隆重介绍啦！前面界面对比测试基本都是基于PhantomJS开发的， Phantom JS是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。对于web测试、界面、网络捕获、页面自动化访问等等方面可以说是信手拈来。
casperjs是对PhantomJS的封装，提供了更加易用的API, 增强了测试等方面的支持。例如通过CasperJS可以轻松实现贴吧的自动发帖功能：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

casper.test.begin( '测试发帖功能' , function suite(test) {        //登录百度      casper.loginBaidu(); //实现略，可以通过cookie或者表单登录实现      casper.thenOpen( 'http://tieba.baidu.com/p/3817915520' , function () {           var text = "楼主好人" ;          //等待发帖框出现          this .waitForSelector(              '#ueditor_replace' ,              function () {                  //开始发帖                  this .echo( "开始发帖。发帖内容: " + text, "INFO" );                  //执行js                  this .page.evaluate( function (text) {                      $( "#ueditor_replace" ).text(text);                      $( "a.poster_submit" ).click(); //点击提交                  },text);              }, function (){                  test.fail( "找不到发帖框#ueditor_replace" );              }          );      })      .run( function () {          test.done();      }); });

通过前端最熟悉的语言，短短几十行代码便可轻松失效自动发帖的功能，还可以在其中添加一些测试逻辑来完善case。
相对于单测来说，casperjs能用简单的API、从真实用户操作的角度来快速测试网站的功能是否正常，并且可以保留每一步测试的截图最终实现操作流可视化。例如下面这个GitHub项目便使用Casperjs测试一个电子商务网站的登录、下单等重要流程是否正常。case完善之后一条命令便可测试整个网站。
casperjs能监听测试和页面的各个状态进行截图等操作，如果针对测试运行结果稍作优化，便可以形成一个可视化操作流：

通过这个能直观的看到各个操作的情况以及错误的步骤(如有错误图片将飘红)，下面则可以看到casper 测试的详细日志输出。
不想维护case?
除非有足够的QA同学来帮你完成测试工作，否则通过人工来回归肯定会消耗更多的精力。在项目功能基本稳定期，维护case会简单的多，而且同样建议针对网站核心功能而不是所有功能来添加case。
浏览器兼容测试
当然selenium同样支持操作测试，类似的工具还有dalekjs等，如果想专门针对IE测试，可以考虑[triflejs]http://triflejs.org/,它提供了与PhantomJS基本类似的API。
PhantomFlow操作对比测试

有没有像图像对比一样直观，又能比较简单的写case的工具呢？可以考虑PhantomFlow, PhantomFlow假定如果页面正常，那么在相同的操作下，测试页面与正常页面的展现应该是一样的。 基于这点，用户只需要定义一系列操作流程和决策分支，然后利用PhantomCSS进行截图和图像对比。最后在一个很赞的可视化报表中展现出来。可以看下作者所在公司进行的测试可视化图表：

完整内容点此查看