哈喽,艾瑞巴蒂,之前小编已经和大家分享了如何准备进行一个项目的代码覆盖率,相关分享请大家移步《前端代码覆盖率第一弹:准备阶段》,今天就和大家分享下具体的实施步骤,就以小编负责的搜狗商城为例。
搜狗商城中你可以买到
Teemo手表
搜狗AI录音笔
周边配件
,你不仅可以花钱而且还可以成为分销员挣钱,详情请咨询“pangzhi-1”
言归正传,项目分为小程序、H5和PC三端业务,今天主角是PC端,PC端采用Nerv框架、Node.js、grunt(打包、编译)、ruby(底层库)、compass(底层库),这些都需要提前和开发沟通了解为选择对应代码覆盖率工具做准备。
市面上的代码覆盖率工具很多,但是对应的说明文档并不是非常齐全,这对我们实际应用到项目中形成了阻碍,小编使用的是JSCover,请移步说明文档查看需要使用的方法,小编也收集了其他统计覆盖率工具,下面为大家普及
这里是代码覆盖率的主要部分,我们这里使用的主要命令为
java -Dfile.encoding=UTF-8 -jar JSCover-all.jar -fs F:/JsCoverage/mall F:/JsCoverage/mall_back
遇到的问题
本地代码插桩的顺序需要注意,小编第一次插桩顺序为: 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工具,功能很强大,包含了很多插件功能。如下图: