前端代码覆盖率工具

一、JavaScript 测试框架-覆盖率

1、istanbul：JS代码覆盖工具

2、blanket：一个简单的JavaScript代码覆盖库，浏览器和nodejs易于安装和使用

3、JSCover：一个测量JavaScript程序代码覆盖率的工具

二、介绍及使用

1、istanbul

（1）原理：istanbul 的实现原理是通过编译期代码插桩方式实现的。istanbul使用的是On the fly模式，即在JVM中通过添加 -java agent 参数指定特定的jar文件启动 Instrumentation的代理程序，代理程序会在ClassLoader装载一个 class 前判断是否已经转移修改了该文件，如果没有则将探针插入 class文件中，探针不改变原有方法的行为，只是记录是否已经执行，相比 Offline 更方便简单，无需提前插桩，无需考虑 classpath设置问题。

（2）准备步骤：window11 安装node及配置环境变量 可查看此教程进行npm的安装和Istanbul的安装

（3）使用教程：

• 使用 istanbul cover 命令就可以得到覆盖率

• Coverage summary 返回结果显示，simple.js 有4个语句（statement），执行了3个；有2个分支（branch），执行了1个；有0个函数，调用了0个；有4行代码，执行了3行。

• 这条命令同时还生成了一个 coverage 子目录，其中的 coverage.json 文件包含覆盖率的原始数据，coverage/lcov-report 是可以在浏览器打开的覆盖率报告，其中有详细信息，到底哪些代码没有覆盖到。

• 同时还可以设置门槛 检查当前代码是否达标  命令：istanbul check-coverage

• istanbul还可以和Mocha框架进行组合使用

istanbul cover_mocha

2、JSCover

（1）原理：它是基于流行的JSCoverage工具开发的，通过在浏览器中执行之前向JavaScript代码中插桩实现的JSCover提供三种方式来测试代码的覆盖率：服务器模式（web server mode），文件系统模式（file-system mode），代理服务器模式（proxy server mode）

（2）准备步骤：https://sourceforge.net/projects/jscover/files/ 下载JSCover2.0.16.zip版本并解压到D盘

（3）使用教程：

• JSCover解压路径中输入cmd打开命令行窗口

• 设置浏览器导出报告，建议使用Firefox浏览器，同时修改其配置

  • Firefix浏览器的地址栏输入 "about:config" 回车；

  • 在搜索框中输入 privacy.file_unique_origin 设置为false

• 调用代码覆盖率工具

  • 命令行窗口中输入

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

• Firefox浏览器中输入http://localhost:8080/jscoverage.html   

• 收集覆盖率数据，在JSCover界面的url输入框中输入 http://localhost:8080/index.html  ，点击Open in frame

  • 点击 Summary 按钮可以查看此时 script.js文件的代码覆盖率情况；

• 点击 /script.js 可以查看代码的具体执行情况，红色代表未执行的部分，绿色代表已经执行的部门，点击info会显示更多的未覆盖信息；

• 点击 Browser按钮 会显示一些提示信息，选择 "One" 再次点击 Summary 就可以发现代码覆盖率有所增加

• 导出报告，点击 Store 再点击 Store Report此时报告保存在先前在命令行窗口中设置的文件夹中，点击 Stop Server 便关闭了服务器

三、二者对比

分类	要素	istanbul	JSCover
覆盖率	Statement 语句覆盖率	√	×
	line coverage 行覆盖率	√	√
	condition coverage 条件覆盖率	×	√
	branch coverage 分支覆盖率	√	√
	function coverage 函数覆盖率	√	√
对象	Javascript file	√	√
	html file	×	×
其他工具支持情况	HtmlUnit	√	×
	WebDriver	√	×
	PhantomJS	√	×
	Selenium	√	×
	Ant	√	×
	Jenkins	√	×