[技术博客]JSCover+selenium获得js代码覆盖率

本文档讲解了我们是如何使用JSCover来获得Selenium的测试样例的js代码文件的执行覆盖率的。

事实上网上有挺多博客讲这玩意儿了，不过完全按照网上已有的教程去弄的的话，并无法满足我们的需要。

参考链接：

1. https://www.cnblogs.com/bhlsheji/p/4
2. https://stackoverflow.com/questions/9495625/selenium-is-there-any-js-javascript-code-coverage-tool-which-we-can-integrate
3. http://tntim96.github.io/JSCover/manual/manual.xml

工具介绍

Selenium

浏览器自动化测试工具。可以模拟用户对浏览器的操作，从而起到自动化测试的效果。具体怎么用，网上一堆教程，不赘述了。

selenium会在测试样例的编写中被使用，我们还会使用selenium的executeScript调用JSCover提供的hook来保存覆盖率数据。

JSCover

js代码覆盖率检测工具。原理是插桩js代码，该项目在github上开源，它也有托管在github上的官网。附带一提，根据我的使用经验来看，有问题不要查百度、也不要查它的user manual，而是应该查github上的issue。

JSCover我们只使用它的JSCover-all.jar文件，下下来以后就拿出来这个就行了。

原理性流程

1. 使用JSCover对js代码进行插桩，使得我们能够获得代码覆盖率。
2. 对插桩后的代码执行测试样例。
3. 将各测试样例的代码覆盖率导出保存起来。
4. 合并各测试样例的代码覆盖率
5. 使用合并后的代码覆盖率文件生成测试报告

流程示意图

实际流程的分步讲解

0. 预准备jscoverage.js

这一步是因为jscover自身存在的问题，原因之后再讲解。总之先得在不启用local-storage的情况下对代码进行一次插桩，得到jscoverage.js。

示例指令：java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs D:/code_origin D:/code_instrumented

• -Dfile.encoding=UTF-8：设定编码，避免网页代码中的中文在插桩后变成乱码。
• -jar JSCover-all.jar：指定JSCover-all.jar的所在路径。
• -fs：指定使用文件插桩模式。我们只使用该模式，除此之外还有proxy模式，不过我们不使用，原因见最下。
• D:/code_origin和D:/code_instrumented：前者为原来的js代码文件所在的目录，后者为想把插桩后的代码保存到的目录。

执行完上述指令后，应该就能在插桩后的代码的所在目录（也就是示例中的D:/code_instrumented）中找到jscoverage.js文件，将它保存到一个合适的地方，留待之后使用。

1. 代码插桩

代码插桩分为两部分，一部分是给网页的js代码文件插桩，使得执行时能够得到覆盖率变量。另一部分是在测试样例的执行末尾利用selenium提供的executeScript调用JSCover提供的hook，这本质就是个动态插桩的过程，它使得我们能够保存下来覆盖率数据。

网页的js代码文件插桩

示例指令：java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs --local-storage D:/code_origin D:/code_instrumented

事实上，它和上一步“预准备”中的指令的差别仅在于--local-storage而已。local-storage的含义是“是否启用HTML5的local-storage功能来保存代码覆盖率变量”。如果不启用的话，JSCover就会用一个js变量来保存代码覆盖率变量，而众所周知，js变量是无法跨页面的，这也就导致每当我们切换页面时，代码覆盖率变量就会丢失。所以我们需要启用local-storage来保存代码覆盖率变量。

不过JSCover在local-storage模式下生成的jscoverage.js文件存在bug，所以我们在上一步“预准备”时需要先在非local-storage下生成一个jscoverage.js文件。这个文件仅仅是用来显示测试报告用的，不会影响到代码覆盖率数据。

hook调用

这一部分可以参考参考链接3（官方手册）中的做法。官网代码的python版：

json_str = driver.execute_script("return jscoverage_serializeCoverageToJSON();")

之后将json_str保存成jscoverage.json，然后放到插桩后的代码所在目录下，覆盖掉原来的jscoverage.json文件就行了。

不过因为官网这种做法是一个类一个jscoverage.json，一个类在selenium中就表示一类测试样例，而我们有好多好多类测试样例，所以就会有好多好多代码覆盖率文件jscoverage.json。所以我们需要在执行时分别保存它们，在全部执行完后再合并它们。合并会在后面再讲解。

假设我们有三个Selenium的测试类，分别将叫TC_A, TC_B, TC_C。那我们可以生成类似以下的一个目录结构

- coverage
    - TC_A
        - jscoverage.json
    - TC_B
        - jscoverage.json
    - TC_C
        - jscoverage.json

这仅仅只需要在保存json_str时操作一下就行了，不再赘述。

2. 执行测试样例

这一部分和平时一模一样，仅仅需要注意要执行插桩后的网页代码文件，而不是插桩前的。

3. 合并代码覆盖率文件

在执行测试样例后，一切正常的话，就能得到类似在第一步中描述的那样的代码覆盖率文件的目录结构了：

- coverage
    - TC_A
        - jscoverage.json
    - TC_B
        - jscoverage.json
    - TC_C
        - jscoverage.json

示例指令： java -cp JSCover-all.jar jscover.report.Main --merge coverage/* D:/code_instrumented

• coverage/*：也就是上述的目录结构的顶层目录的路径。
• D:/code_instrumented：合并后的代码覆盖率文件的保存目录。我们直接指定为插桩后的代码的所在目录，省去手动覆盖的麻烦。

注意，如果只有一个jscoverage.json的话，是无法使用上述指令进行合并的，毕竟只有一个，JSCover会报错。这时候请手动复制那唯一一个jscoverage.json，覆盖掉原来的jscoverage.json。

4. 生成测试报告

把我们在“预准备”时搞到的jscoverage.js翻出来，然后覆盖掉插桩后的代码所在目录下的jscoverage.js，再修改一下它，将jscoverage_isReport改为true：

var jscoverage_isReport = true;

最后打开jscoverage.html即可。可能会啥都没，这时候你打开浏览器的控制台看看报啥错吧，例如chrome的话，通常而言都是Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.，然后百度百度解决一下，或者换个浏览器再试试，或者自己改改jscoverage.html，都行。我是最后直接用Edge打开了。

最后应该是这样子的：

点开一个文件的话，就能看见哪些行被覆盖了，哪些没有：

不使用JSCover的Proxy模式的原因

Proxy模式要方便很多，可以省去插桩网页代码的步骤。因为proxy模式下，jscover会截获所有浏览器的发包和收包，对于所有发过来的js文件，它都会自动进行插桩。

不过因为JSCover的Proxy模式需要修改浏览器代理。而我们目前的本地测试环境使用了Fiddler作为浏览器代理，这两个代理冲突了，也就只能二选一，所以我们没有使用JSCover的Proxy模式，不过要是你的项目不使用浏览器代理来搭建本地测试环境，可以考虑用用JSCover的proxy模式，真的方便很多。