前端自动化测试探索

背景

测试是完善的研发体系中不可或缺的一环。前端一样须要测试，你的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能够轻松实现贴吧的自动发帖功能：

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进行截图和图像对比。最后在一个很赞的可视化报表中展示出来。能够看下做者所在公司进行的测试可视化图表：

图片中表明不一样的操做，每一个操做有决策分支，每一个绿色的点表明图像对比正常，若是是红色则表明异常。点击进去能够查看操做的详情：

不得不说这是一个不错的构思，它将操做测试的case浓缩成决策树，用户只须要定义进行何种操做并对关键部分进行截图便可。若是网站偏向静态或者能保证沙盒地址数据一致性，那么用这个测试工具能有效提升实施自动化测试的效率。

性能测试

网站展示性能也愈来愈成为人们关注的点，尤为是移动端性能始终是一个影响体验的重要因素。通常开发者都会利用自动化工具对资源进行合并压缩等优化，不少大公司也都搭建本身的性能监控系统指导优化工做。性能监控能够参考个人另外一篇文章七天打造前端性能监控系统。

须要注意的是性能并非一个目标，而是开发、测试过程当中须要持续关注的问题。咱们有自动化的工具和框架在开发时进行优化，一样能够借助工具在测试时进行性能测试。

这里推荐一个一样是基于PhantomJS的工具Phantomas,它能运行测试页面获取不少性能指标，加载时间、页面请求数、资源大小、是否开启缓存和Gzip、选择器性能、dom结构等等诸多指标都能一次性获得，而且有相应的grunt插件。你也能够对检测指标进行二次开发，例如移动端定义一个最大图片大小的规则，在开发的时候若是使用了超过限制的大图则进行告警。不过若是把加载过程当中的时间点做为常规的测试监控，则最好模拟移动端网络环境。

页面特征检测与实践

前面讲到性能测试中测试资源大小其实就属于一种资源特征，诸如此类咱们还能够开发一些通用的测试规则，以测试页面是否正常。这种测试主要适用于在界面和操做上没法直接进行判断的元素。例如页面中广告部署是否正常。

广告部署检测实践

第三方部署广告以及物料配置的时候容易出现问题，例如代码脚本升级出错、部署错误、物料尺寸格式不对、广告容器未适配多种屏幕大小、广告是否可见、时效广告是否展示等。已知的问题就有不少，若是出现问题时由广告系统的人员挨个检测是一个很耗费人力的过程。而这些特征都是跟实际运行环境相关的，大部分均可以经过casperjs之类的工具来进行检测。

另外与广告相关的还有屏蔽检测等，检测页面div广告区块(非iframe广告)是否被拦截插件所拦截。因为拦截插件使用的基本相同的拦截规则，并且对于div广告采用的是选择器屏蔽，检测过程当中只须要根据相关的检测规则判断选择器是否存在页面中便可。这在casperjs中一个api便可搞定:

if(casper.exist(selector)){ casper.captureSelector(filename,selector); } 

这样便能直接截图被拦截的区域了。

与自动化测试的结合

回到刚才的需求，如何经过casperjs实现这些检测需求呢。casperjs支持执行JS来获取返回结果：

this.page.evaluate(function(text) { $("#ueditor_replace").text(text); $("a.poster_submit").click();//点击提交 },text); 

并且能够主动注入jquery或者zepto等框架，这样你就能够以很是简单的方式来操做分析dom元素了。例如根据html结构特征获取部署类型、自动扫描广告检测容器宽度、获取广告的选择器来进行截屏等。若是页面有报错能够经过casper的api进行监听：

casper.on("page.error", function(msg, trace) { this.echo(msg,'WARNING'); //详细错误信息 if(trace){ this.echo("Error: " + msg, "ERROR"); this.echo("file: " + trace[0].file, "WARNING"); this.echo("line: " + trace[0].line, "WARNING"); this.echo("function: " + trace[0]["function"], "WARNING"); } }); 

还能捕获网络请求分析死链或者广告请求：

//记录全部请求 casper.on('resource.requested', function(req,networkRequest) { //do something }); 

更加赞的是你还能够进入到跨域的iframe里面去进行操做！

casper.withFrame(id/name,function(){ //now you are inside iframe }) 

注意: iframe操做时推荐用name，id有时候会发生错位。

检测示例：

能够说有这么赞的工具你能轻松实现不少意想不到的需求！

配置化减少成本

在开发了检测工具以后，固然要想办法减少使用成本，如上面例子中，只需将广告检测的一些规则和检测页面进行配置化，用户使用的时候只须要关注须要测试哪些页面而已。工具会根据用户提交配置自动运行并将结果返还给用户。

与CI的结合

讲到这里，上面这些步骤很像ci系统啦！若是能经过ci实现一系列的自动化部署测试等工做，使用上就更加顺畅了。

谈起ci确定要介绍jenkins,稳定可靠，是不少大公司ci的首选。只是在前端的眼中它看起来会感受。。丑了点和难用了点。。若是能像travis-ci那样小清新和直观易用该多好哈哈。

固然若是你要本身实现一套相似ci的流程也不复杂，由于对于上面提到的自动化测试来讲只须要一个队列系统处理批量提交的测试任务而后将运行结果反馈给用户便可。固然前端测试可能对于自定义的报表输出要求更高点。若是你想实现一套，使用laravel和beanstalkd能快速搭建一套完善的队列系统，laravel已经提供不少内置支持。各个服务的运行结果输出成html报表，就能实现一套轻量级且支持自定义展示的ci系统了。这方面有不少教程，能够自行搜索。

国外作的比较好的轻量级ci系统有:

• http://wercker.com/
• https://semaphoreci.com/
• https://codeship.com
• https://circleci.com/
• …

良好的用户体验让人使用的心情愉悦没有障碍，若是想定制能够做为参考。

实践经验

前端自动化测试能够说仍是一个在不断探索的领域，实施过程当中也不免遇到问题。有些须要注意的点能够做为经验参考。

减少使用和维护成本

自动化测试为人诟病的地方无外乎使用效果和使用成本，使用效果能够对症下药选择合适的工具，而使用成本则能够经过一系列措施来减少到合理程度：

• 与构建工具结合

  grunt、FIS，将自动化测试与构建工具结合能更早的发现问题，也能减少使用和维护成本

• 与持续基础结合

  与CI系统的结合能更大范围更有效的发挥自动化测试的做用

• 与工做流结合

  与平常工做流结合一样是为了减小使用成本，如将结果经过自定义的方式反馈给用户等。

• 测试配置化

  测试配置化能让用户使用和维护更加简单、大部分状况下只须要维护配置脚本便可

注重细节提升问题定位能力

每一个产品都有自身的特色，若是只是粗略的使用这些开源工具，可能达不到想要的效果，须要根据自身的状况选择合理的工具并进行必定的调优。只有不断提升自动化测试的问题定位能力，才能真正发挥自动化的价值。

利用开源力量、合理搭配使用

1. 若是遇到问题，请寻找解决思路
2. 根据思路寻找开源支持
3. 若是找不到请参照第一条

开源世界已经有不少优秀的资源，不建议从头开开始造轮子，除非你能很好的维护下去。基于现有的优秀工具、库、平台，针对自身产品的特色进行优化和二次开发更有利于工具自己的发展。

总结

测试是研发重要环节，前端自动化测试虽然还在不断探索但已经有不少优秀的工具和库。

合理利用工具、针对性选择、减少使用和维护成本。

参考资料：

• http://rupl.github.io/frontend-testing/#/6/2
• http://www.phase2technology.com/blog/css-testing-with-phantomcss-phantomjs-casperjs-and-grunt/
• http://blog.nodejitsu.com/npmawesome-page-metrics-with-phantomas/
• http://fideloper.com/ubuntu-beanstalkd-and-laravel4
• http://www.yegor256.com/2014/10/05/ten-hosted-continuous-integration-services.html
• http://www.zhihu.com/question/19786019
• http://www.zhihu.com/question/29922082