前端代码覆盖率第二弹：实施阶段-原创手记-慕课网

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

了(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 src="/src/js/main.js"></script>
<script src="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 src="/src/js/main.js"></script>
<script src="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 src="/src/js/main.js"></script>
<script src="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 src="/src/js/main.js"></script>
<script src="jscoverage.js"></script>
</body>
</html>

保存结果

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

获取报告

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

遇到的问题

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

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