js代码覆盖率测试工具

本文章转载于搜狗测试

目前，业界主流开源js覆盖率工具有ScriptCover，Istanbul和JSCover。都是通过代码插桩来收集覆盖率信息进而生成报告。而且支持用户深度定制。

作者所在团队就基于JSCover开发了JSCover++。不仅增加了版本diff代码的覆盖率信息，同时也优化了工具的可靠性和易用性。

一、现有主流工具

1．ScriptCover

ScriptCover下载地址：https://code.google.com/archive/p/script-cover/downloads。作为chrome浏览器的扩展插件，可以直接在chrome上执行测试，工具自动收集用例的覆盖情况，并生成报告。如图1，可查看页面下的所有js文件及测试用例的覆盖率信息。在详情页，有每个文件的代码行覆盖情况。

图1ScriptCover报告概要

ScriptCover使用简单，但对处理复杂js文件性能欠佳。而且，该工具必须从外部自行添加至chrome，一旦关闭浏览器，该插件就会被chrome阻止。

2.Istanbul

不同于ScriptCover，Istanbul更关注Node.js环境下的javascript覆盖率。它关注的是待测脚本自身的逻辑。

安装命令：$ npm install –g istanbul

执行命令：若待测试的脚本是simple.js，执行istanbul cover命令，就能得到多种覆盖率信息，如图2。

图2Istanbul测试报告示例1

Istanbul更适合自测脚本。但太过拘泥于代码细节，甚至会延误整个项目上线。

3.JSCover

JSCover需要在浏览器中执行测试用例。源码地址为：https://sourceforge.net/projects/jscover/files/。JSCover-1.0.24\target\dist目录下的jar包提供了JSCover的所有功能。

测试前需要先建立JSCover服务，命令如下：

java -jar target/dist/JSCover-all.jar -ws --document-root=doc/example --report-dir=target

其中，-ws参数表示启用web server模式，--document-root参数设置待测页面的本地资源目录，--report-dir参数设置插桩文件、报告资源等文件的存储目录。

启动浏览器访问http://localhost:8080/jscoverage.html，在Browser输入已存于本地的待测页面地址即可。

报告如图3。详情页可以看到每一个文件的每行被执行的次数。

图3覆盖率汇总页

JSCover要求测试页面的所有资源文件都存在本地。这会提高前期准备成本。

二、私人深度定制

以上工具都是对js文件进行全量的监控统计，如果要做版本diff代码的测试，怎么办？私人订制即可。

我们以JSCover为基础进行开发，沿用代码插桩、覆盖率信息存储、生成报告功能。同时使用python重构了覆盖率信息上报的代码如图4，增加了svn diff代码分析的功能，如图5所示

图4覆盖率信息上报接口重构

图5diff代码分析实现

在使用过程中，首先对本地js文件进行插桩，再利用fiddler将线上的网络请求重定向到本地文件。报告如图6，黄色底部分是diff代码的相关覆盖信息。

图6JSCover++报告汇总页

详情页如图7。以颜色区分行覆盖，绿色表示覆盖，红色表示未覆盖，白色表示diff代码。

图7JSCover++报告详情页