本文章转载于搜狗测试
目前,业界主流开源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++报告详情页