继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

乔Joan
关注TA
已关注
手记 40
粉丝 51
获赞 91

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

了(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工具,功能很强大,包含了很多插件功能。如下图:



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP

热门评论

你知道有一个叫写手的么

查看全部评论