前端自动化测试探索( 二 ) _前端

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浓缩成决策树，用户只需要定义进行何种操作并对关键部分进行截图即可。如果网站偏向静态或者能保证沙盒地址数据一致性，那么用这个测试工具能有效提高实施自动化测试的效率。
性能测试网站展现性能也越来越成为人们关注的点，尤其是移动端性能始终是一个影响体验的重要因素。一般开发者都会利用自动化工具对资源进行合并压缩等优化，很多大公司也都搭建自己的性能监控系统指导优化工作。性能监控可以参考我的另一篇文章七天打造前端性能监控系统。