摘 要

　　喂，你那个刚测好的页面怎么又出现了bug？这里怎么交互几次页面重绘就出了问题？你到底对前端测试用例的覆盖率有几分把握，真的没有测试遗漏嘛？对于这些疑问，正在看文章的你如果能够轻松应对，那么请关掉屏幕，本文与你关系不大，出去运动一下吧。但如果你也有类似的困惑，并且正在寻找衡量js代码测试完整度的方法，那么请继续阅读，文中介绍的js覆盖率工具会让你在完善前端测试用例的征途上，走的轻松一些。

　　正 文

　　众所周知，前端测试需求多、改动大，业务逻辑复杂又紧密，往往首轮设计的测试用例并不能完全覆盖所有的功能点和diff代码。这时，就需要代码覆盖率工具帮助我们发现测试未能覆盖到的代码分支和逻辑，js覆盖率测试工具也就随之诞生了。

　　目前，活跃在舞台上的业界主流开源js覆盖率工具有ScriptCover，Istanbul和JSCover这三款，它们均是各自适用领域内的佼佼者，簇拥者甚多。其工作原理与Java或者C++代码覆盖率测试工具相同，均要经过"代码插桩"-"覆盖率信息收集"-"生成报告"这三个步骤。掌握了这三款工具的使用，相信你便可以应对日常工作中的大部分需求。但如果你的项目特点或者工作场景是这些现有工具不能完全满足的，不必担心，借助于它们功能强大的开源api，进一步开发封装，你也可以实现属于自己的覆盖率工具。这不，作者所在的测试团队就基于JSCover进一步开发出了一款全新的测试工具-JSCover++。JSCover++不仅增加了版本diff代码的覆盖率信息，同时也对工具的可靠性和易用性进行了大幅优化。

　　下面就向各位看官逐一介绍这几款工具的使用，还不快搬小板凳来围观！

　　一、现有主流工具

　　1．ScriptCover

　　ScriptCover是2011年google开发的一款开源、免费的js覆盖率统计工具，下载地址在这里：https://code.google.com/archive/p/script-cover/downloads。该工具作为chrome浏览器的扩展插件，我们可以直接在chrome上执行测试，工具自动收集用例的覆盖情况，并生成友好的可视化报告，使用起来非常方便简单。下面几个步骤便可轻松掌握ScriptCover。

　　1)安装

　　登陆上面链接地址，选择最新的ScriptCover-1.0.0.2.crx下载至本地。然后打开chrome浏览器的"扩展程序"页，将应用拖拽进来（本文使用的chrome版本是47.0.2526.106 m）。在弹出的提示窗内点击"添加扩展程序"，授权安装即可,如图1。

图1 ScriptCover安装提示

　　2)执行测试

　　安装完毕， chrome的工具栏会显示ScriptCover的图标。接下来，我们就可以在相关页面进行自己的测试工作。得力于该工具与chrome浏览器的紧密结合，我们无需做额外的准备和配置，便可透明地开展测试。

　　3)查看报告

　　ScripteCover会帮助我们自动收集覆盖率信息，并生成标记的覆盖率报告。如图2，点击ScriptCover的图标即可查看页面下的所有js文件及测试用例涉及到的覆盖率信息。

　图2 ScriptCover报告概要

　　点击图2中的"See full coverage report"，会得到报告的详情页，如图3。选中左侧的文件后，右边会出现该文件的覆盖率具体信息。绿色底覆盖的代码行，是测试用例覆盖到的，其余代码行则是未覆盖到的。由此，我们就可以分析未覆盖的代码来补充测试用例。　　

图3 ScriptCover报告详情页

　　ScriptCover使用简单，易上手，但对处理复杂js文件性能欠佳。更主要的是，该工具目前已经不被chrome官方商店支持，必须从外部自行添加至chrome，一旦关闭浏览器，该插件就会被chrome阻止使用，易用性反而大打折扣。

　　2．Istanbul

　　Istanbul不同于ScriptCover，它更关注Node.js环境下的javascript覆盖率。这款工具不需要浏览器这样的载体，它关注的是待测脚本自身的逻辑，需要我们在代码层面设计测试用例。

　　Istanbul既可以静态地、直接统计目标js文件，也可以结合测试套件，在单元测试过程中，进行目标js文件的覆盖率统计。

　　1)安装

　　Istanbul是一个npm模块，安装非常简单，如下命令：

　　$ npm install -g istanbul

　　2)覆盖率测试

　　假定待测试的脚本文件是simple.js：

　　var a = 1;

　　var b = 1;

　　if ((a + b) > 2) {

　　console.log('more than two');

　　}

　　使用istanbul cover命令，就能得到多种覆盖率信息，如图4。

图4 Istanbul测试报告示例1

　　3)与测试框架结合

　　若待测试脚本sqrt.js如下：

　　var My = {

　　sqrt: function(x) {

　　if (x < 0) throw new Error("负值没有平方根");

　　return Math.exp(Math.log(x)/2);

　　}

　　};

　　module.exports = My;

　　测试脚本test.sqrt.js如下：

　　var chai = require('chai');

　　var expect = chai.expect;

　　var My = require('../sqrt.js');

　　describe("sqrt", function() {

　　it("4的平方根应该等于2", function() {

　　expect(My.sqrt(4)).to.equal(2);

　　});

　　it("参数为负值时应该报错", function() {

　　expect(function(){ My.sqrt(-1); }).to.throw("负值没有平方根");

　　});

　　});

　　执行下面命令，便可得到代码覆盖率。

图5 Istanbul测试报告示例2

　　通过以上的使用过程，大家可以看出，Istanbul更适合开发人员自测脚本使用。对于前端测试这个阶段来说，这种测试方法太过拘泥于代码细节，甚至会延误整个项目的上线计划。

作者：搜狗测试 武凯 王鹏   

来源：51Testing软件测试网原创