首页手记前端代码覆盖率第二弹：实施阶段

前端代码覆盖率第二弹：实施阶段

标签：

资讯活动搞笑

哈喽，艾瑞巴蒂，之前小编已经和大家分享了如何准备进行一个项目的代码覆盖率，相关分享请大家移步《前端代码覆盖率第一弹：准备阶段》，今天就和大家分享下具体的实施步骤，就以小编负责的搜狗商城为例。

了(da)解(guang)项(gao)目(!)

搜狗商城中你可以买到Teemo手表 搜狗AI录音笔 周边配件，你不仅可以花钱而且还可以成为分销员挣钱，详情请咨询“pangzhi-1”
言归正传，项目分为小程序、H5和PC三端业务，今天主角是PC端，PC端采用Nerv框架、Node.js、grunt（打包、编译）、ruby（底层库）、compass（底层库），这些都需要提前和开发沟通了解为选择对应代码覆盖率工具做准备。

选择工具

市面上的代码覆盖率工具很多，但是对应的说明文档并不是非常齐全，这对我们实际应用到项目中形成了阻碍，小编使用的是JSCover，请移步说明文档查看需要使用的方法，小编也收集了其他统计覆盖率工具，下面为大家普及

下载JSCover工具：http://tntim96.github.io/JSCover/
解压后直接搜索“JSCover-all.jar”，这个是代码覆盖率的主要工具。
直接将需要插桩的代码和JSCover-all.jar放到同一个目录即可。

代码插桩

这里是代码覆盖率的主要部分，我们这里使用的主要命令为

java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs F:/JsCoverage/mallF:/JsCoverage/mall_back

Dfile.encoding=UTF-8：设定编码，避免网页代码中的中文在插桩后变成乱码
fs：jscover共三种插桩模式：-ws：web server 、-fs：file system 、proxy：代理模式
path：第一个路径为待插桩路径，第二个路径为插桩后的路径

遇到的问题

本地代码插桩的顺序需要注意，小编第一次插桩顺序为：
git clone- >代码插桩->build>->本地部署代码

这种方式是无法成功部署本地代码的，因为代码进行插桩操作后增加了冗余代码，对部署造成了影响，改后流程：
git clone- >build->代码插桩->本地部署代码
这样本地代码就可以部署了。

执行代码

执行代码指的是执行UI Test测试代码，小编使用的是Python + Unitest + Selenium，这里通过hook方式获取代码覆盖率相关的数据，代码如下：

from selenium import webdriver
if __name__ == '__main__':

   driver = webdriver.Chrome()
   driver.get("http://localhost/")
   driver.find_element_by_class_name('nav').click()
   #这里使用hook方式进行行覆盖和分支覆盖数据获取
   json_str = driver.execute_script('return jscoverage_serializeCoverageToJSON();')
   print(json_str)
   driver.quit()

遇到的问题

部署成功后，运行以上代码获取的json_str value为什么为空？
原因：通过JSCover进行代码覆盖率统计，其实主要起作用的文件是插桩之后产生的JSCoverage.js文件，需要将该文件引入至项目中。
解决方案：找到项目的main.html，进行文件引入修改，我使用的是本地服务，后续会将这个文件放置Git上管理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="/src/css/main.css">
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/main.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jscoverage.js"></script>
</body>
</html>

保存结果

执行完上一步操作后，json_str变量就会有值，将数据保存为json格式的文件放置插桩之后的文件路径下即可。我这里是生成一个Js文件的例子，也可以生成多个，执行完用例后统一执行hook命令即可。

获取报告

将xxx.json文件放置插桩文件目录下，可以直接访问jscoverage.html文件即可。

哈喽，艾瑞巴蒂，之前小编已经和大家分享了如何准备进行一个项目的代码覆盖率，相关分享请大家移步《前端代码覆盖率第一弹：准备阶段》，今天就和大家分享下具体的实施步骤，就以小编负责的搜狗商城为例。

了(da)解(guang)项(gao)目(!)

搜狗商城中你可以买到Teemo手表 搜狗AI录音笔 周边配件，你不仅可以花钱而且还可以成为分销员挣钱，详情请咨询“pangzhi-1”

言归正传，项目分为小程序、H5和PC三端业务，今天主角是PC端，PC端采用Nerv框架、Node.js、grunt（打包、编译）、ruby（底层库）、compass（底层库），这些都需要提前和开发沟通了解为选择对应代码覆盖率工具做准备。

选择工具

市面上的代码覆盖率工具很多，但是对应的说明文档并不是非常齐全，这对我们实际应用到项目中形成了阻碍，小编使用的是JSCover，请移步说明文档查看需要使用的方法，小编也收集了其他统计覆盖率工具，下面为大家普及

下载JSCover工具：http://tntim96.github.io/JSCover/
解压后直接搜索“JSCover-all.jar”，这个是代码覆盖率的主要工具。
直接将需要插桩的代码和JSCover-all.jar放到同一个目录即可。

代码插桩

这里是代码覆盖率的主要部分，我们这里使用的主要命令为

java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs F:/JsCoverage/mallF:/JsCoverage/mall_back

Dfile.encoding=UTF-8：设定编码，避免网页代码中的中文在插桩后变成乱码
fs：jscover共三种插桩模式：-ws：web server 、-fs：file system 、proxy：代理模式
path：第一个路径为待插桩路径，第二个路径为插桩后的路径

遇到的问题

本地代码插桩的顺序需要注意，小编第一次插桩顺序为：
git clone- >代码插桩->build>->本地部署代码

这种方式是无法成功部署本地代码的，因为代码进行插桩操作后增加了冗余代码，对部署造成了影响，改后流程：
git clone- >build->代码插桩->本地部署代码
这样本地代码就可以部署了。

执行代码

执行代码指的是执行UI Test测试代码，小编使用的是Python + Unitest + Selenium，这里通过hook方式获取代码覆盖率相关的数据，代码如下：

from selenium import webdriver
if __name__ == '__main__':

   driver = webdriver.Chrome()
   driver.get("http://localhost/")
   driver.find_element_by_class_name('nav').click()
   #这里使用hook方式进行行覆盖和分支覆盖数据获取
   json_str = driver.execute_script('return jscoverage_serializeCoverageToJSON();')
   print(json_str)
   driver.quit()

遇到的问题

部署成功后，运行以上代码获取的json_str value为什么为空？
原因：通过JSCover进行代码覆盖率统计，其实主要起作用的文件是插桩之后产生的JSCoverage.js文件，需要将该文件引入至项目中。
解决方案：找到项目的main.html，进行文件引入修改，我使用的是本地服务，后续会将这个文件放置Git上管理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="/src/css/main.css">
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/main.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jscoverage.js"></script>
</body>
</html>

保存结果

执行完上一步操作后，json_str变量就会有值，将数据保存为json格式的文件放置插桩之后的文件路径下即可。我这里是生成一个Js文件的例子，也可以生成多个，执行完用例后统一执行hook命令即可。

获取报告

将xxx.json文件放置插桩文件目录下，可以直接访问jscoverage.html文件即可。

遇到的问题

如果直接用浏览器的话会遇到以下问题：

原因：jscoverage.html文件为本地文件，产生了跨协议的问题
解决方案：将文件方式本地服务器即可，小编使用的是XAMPP工具，功能很强大，包含了很多插件功能。如下图：

哈喽，艾瑞巴蒂，之前小编已经和大家分享了如何准备进行一个项目的代码覆盖率，相关分享请大家移步《前端代码覆盖率第一弹：准备阶段》，今天就和大家分享下具体的实施步骤，就以小编负责的搜狗商城为例。
了(da)解(guang)项(gao)目(!)
搜狗商城中你可以买到Teemo手表 搜狗AI录音笔 周边配件，你不仅可以花钱而且还可以成为分销员挣钱，详情请咨询“pangzhi-1”

言归正传，项目分为小程序、H5和PC三端业务，今天主角是PC端，PC端采用Nerv框架、Node.js、grunt（打包、编译）、ruby（底层库）、compass（底层库），这些都需要提前和开发沟通了解为选择对应代码覆盖率工具做准备。
选择工具
市面上的代码覆盖率工具很多，但是对应的说明文档并不是非常齐全，这对我们实际应用到项目中形成了阻碍，小编使用的是JSCover，请移步说明文档查看需要使用的方法，小编也收集了其他统计覆盖率工具，下面为大家普及

下载JSCover工具：http://tntim96.github.io/JSCover/
解压后直接搜索“JSCover-all.jar”，这个是代码覆盖率的主要工具。
直接将需要插桩的代码和JSCover-all.jar放到同一个目录即可。

代码插桩
这里是代码覆盖率的主要部分，我们这里使用的主要命令为
java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs F:/JsCoverage/mallF:/JsCoverage/mall_back
Dfile.encoding=UTF-8：设定编码，避免网页代码中的中文在插桩后变成乱码
fs：jscover共三种插桩模式：-ws：web server 、-fs：file system 、proxy：代理模式
path：第一个路径为待插桩路径，第二个路径为插桩后的路径
遇到的问题
本地代码插桩的顺序需要注意，小编第一次插桩顺序为：
git clone- >代码插桩->build>->本地部署代码
这种方式是无法成功部署本地代码的，因为代码进行插桩操作后增加了冗余代码，对部署造成了影响，改后流程：
git clone- >build->代码插桩->本地部署代码
这样本地代码就可以部署了。
执行代码
执行代码指的是执行UI Test测试代码，小编使用的是Python + Unitest + Selenium，这里通过hook方式获取代码覆盖率相关的数据，代码如下：
from selenium import webdriver
if __name__ == '__main__':

   driver = webdriver.Chrome()
   driver.get("http://localhost/")
   driver.find_element_by_class_name('nav').click()
   #这里使用hook方式进行行覆盖和分支覆盖数据获取
   json_str = driver.execute_script('return jscoverage_serializeCoverageToJSON();')
   print(json_str)
   driver.quit()
遇到的问题
部署成功后，运行以上代码获取的json_str value为什么为空？
原因：通过JSCover进行代码覆盖率统计，其实主要起作用的文件是插桩之后产生的JSCoverage.js文件，需要将该文件引入至项目中。
解决方案：找到项目的main.html，进行文件引入修改，我使用的是本地服务，后续会将这个文件放置Git上管理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="/src/css/main.css">
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/main.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jscoverage.js"></script>
</body>
</html>
保存结果
执行完上一步操作后，json_str变量就会有值，将数据保存为json格式的文件放置插桩之后的文件路径下即可。我这里是生成一个Js文件的例子，也可以生成多个，执行完用例后统一执行hook命令即可。
获取报告
将xxx.json文件放置插桩文件目录下，可以直接访问jscoverage.html文件即可。
遇到的问题
如果直接用浏览器的话会遇到以下问题：

原因：jscoverage.html文件为本地文件，产生了跨协议的问题
解决方案：将文件方式本地服务器即可，小编使用的是XAMPP工具，功能很强大，包含了很多插件功能。如下图：

哈喽，艾瑞巴蒂，之前小编已经和大家分享了如何准备进行一个项目的代码覆盖率，相关分享请大家移步《前端代码覆盖率第一弹：准备阶段》，今天就和大家分享下具体的实施步骤，就以小编负责的搜狗商城为例。

了(da)解(guang)项(gao)目(!)

搜狗商城中你可以买到Teemo手表 搜狗AI录音笔 周边配件，你不仅可以花钱而且还可以成为分销员挣钱，详情请咨询“pangzhi-1”

言归正传，项目分为小程序、H5和PC三端业务，今天主角是PC端，PC端采用Nerv框架、Node.js、grunt（打包、编译）、ruby（底层库）、compass（底层库），这些都需要提前和开发沟通了解为选择对应代码覆盖率工具做准备。

选择工具

市面上的代码覆盖率工具很多，但是对应的说明文档并不是非常齐全，这对我们实际应用到项目中形成了阻碍，小编使用的是JSCover，请移步说明文档查看需要使用的方法，小编也收集了其他统计覆盖率工具，下面为大家普及

下载JSCover工具：http://tntim96.github.io/JSCover/
解压后直接搜索“JSCover-all.jar”，这个是代码覆盖率的主要工具。
直接将需要插桩的代码和JSCover-all.jar放到同一个目录即可。

代码插桩

这里是代码覆盖率的主要部分，我们这里使用的主要命令为

java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs F:/JsCoverage/mallF:/JsCoverage/mall_back

Dfile.encoding=UTF-8：设定编码，避免网页代码中的中文在插桩后变成乱码
fs：jscover共三种插桩模式：-ws：web server 、-fs：file system 、proxy：代理模式
path：第一个路径为待插桩路径，第二个路径为插桩后的路径

遇到的问题

本地代码插桩的顺序需要注意，小编第一次插桩顺序为：
git clone- >代码插桩->build>->本地部署代码

这种方式是无法成功部署本地代码的，因为代码进行插桩操作后增加了冗余代码，对部署造成了影响，改后流程：
git clone- >build->代码插桩->本地部署代码
这样本地代码就可以部署了。

执行代码

执行代码指的是执行UI Test测试代码，小编使用的是Python + Unitest + Selenium，这里通过hook方式获取代码覆盖率相关的数据，代码如下：

from selenium import webdriver
if __name__ == '__main__':

   driver = webdriver.Chrome()
   driver.get("http://localhost/")
   driver.find_element_by_class_name('nav').click()
   #这里使用hook方式进行行覆盖和分支覆盖数据获取
   json_str = driver.execute_script('return jscoverage_serializeCoverageToJSON();')
   print(json_str)
   driver.quit()

遇到的问题

部署成功后，运行以上代码获取的json_str value为什么为空？
原因：通过JSCover进行代码覆盖率统计，其实主要起作用的文件是插桩之后产生的JSCoverage.js文件，需要将该文件引入至项目中。
解决方案：找到项目的main.html，进行文件引入修改，我使用的是本地服务，后续会将这个文件放置Git上管理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="/src/css/main.css">
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/main.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jscoverage.js"></script>
</body>
</html>

保存结果

执行完上一步操作后，json_str变量就会有值，将数据保存为json格式的文件放置插桩之后的文件路径下即可。我这里是生成一个Js文件的例子，也可以生成多个，执行完用例后统一执行hook命令即可。

获取报告

将xxx.json文件放置插桩文件目录下，可以直接访问jscoverage.html文件即可。

遇到的问题

如果直接用浏览器的话会遇到以下问题：

原因：jscoverage.html文件为本地文件，产生了跨协议的问题
解决方案：将文件方式本地服务器即可，小编使用的是XAMPP工具，功能很强大，包含了很多插件功能。如下图：

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

乔Joan

软件测试工程师

手记
篇

粉丝

51

获赞与收藏

91

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 28530 319

网络编程入门教程

20个小节 11894 225

Pandas 入门教程

25个小节 17201 311

推荐

1

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

前端代码覆盖率第二弹：实施阶段

了(da)解(guang)项(gao)目(!)

选择工具

代码插桩

执行代码

保存结果

获取报告

了(da)解(guang)项(gao)目(!)

选择工具

代码插桩

执行代码

保存结果

获取报告

了(da)解(guang)项(gao)目(!)

选择工具

代码插桩

执行代码

保存结果

获取报告

了(da)解(guang)项(gao)目(!)

选择工具

代码插桩

执行代码

保存结果

获取报告

阅读免费教程