本来转载自:https://my.oschina.net/u/3041656/blog/1563911
生成的测试报告是html格式的,并且每条测试用例都是以表格的形式展示出来的,当然了,这些种种,都不是我写的,而是通过htmlTestRunner.py文件来实现的
接下来要做的事情就是把这个饼图添加到html文件中去了。所以,我们现在来看HTMLTestRunner.py文件的内容。
from matplotlib import pyplot as plt
import os
from common.Log import MyLog as Log
首先我们要引入需要用的模块,这里需要提醒大家的是:Log模块是我自定义的一个py文件,这里之所以引入该模块,是为了获取每次执行测试的result文件夹的名称,以便保存我们画的饼图。小伙伴们可以自行选择保存的路径,不必一致。
然后,我们先把画饼图的代码追加到HTMLTestRunner类下面:
# 绘制结果饼图
def DrawPie(self, result):
"""
绘制饼图用pie
:return:
"""
labels = 'OK', 'NG', 'E'
fracs = [result.success_count, result.failure_count, result.error_count]
colors = ['green', 'orange', 'red']
explode = [0, 0, 0] # 0.1 凸出这部分,
plt.axes(aspect=1) # set this , Figure is round, otherwise it is an ellipse
# autopct ,show percet
plt.pie(x=fracs, colors=colors, labels=labels, explode=explode, autopct='%3.1f %%',
shadow=True, labeldistance=1.1, startangle=90, pctdistance=0.6
)
# plt.show()
# 显示图例
plt.legend()
logPath = Log.get_log().get_result_path()
imgPath = os.path.join(logPath, "pie.png")
plt.savefig(imgPath)
return logPath.split("\\")[-1]
这里需要注意的地方是:我们传入了一个参数result,并通过它获取了测试用的pass,fail和error的数量。
fracs=[result.success_count, result.failure_count, result.error_count]既是饼图中每次测试的pass,fail和error的数量。
现在画饼图的函数已经放进来了,我们再来修改下html页面的代码,给我们的饼图找一块舒适的区域安家落户。请看下面的内容:
我把饼图放到了heading部分,我们在HEADING_TMPL部分添加红框中的代码,之所以添加了两个div容器,主要是考虑到位置空间大小的问题,我们也知道,图片很大,直接塞到heading里面会让页面变得很丑,实在影响美观,所以我就用鼠标事件来控制,当我们鼠标在小图上时,我们就放大展示这个饼图,否则只能看到缩略图。
这里的图片引用路径我是根据自己的测试报告生成路径来确定的,因为每次运行测试,我都会生成一个测试报告文件夹,在这个文件夹下面,我会保存三个文件,分别是:output.log文件,report.html文件以及我们画的pie.png饼图问件,所以这里我使用相对路径,并且只需要动态获取测试报告文件夹的名称即可。到这里,你应该明白,我刚开始为什么要引入自定义的Log模块了吧,就是为了获得文件夹的名字。
好了,页面元素也添加完毕了,接下来就该添加css样式来调整展示的情况了。请看下面内容:
.report_pie{
float:right;
margin-top:-190px;
margin-right:600px;
width:280px;
height:210px;
background-color:#999;
}
.report_pie img {
width: 100%;
height: 100%;
}
.big_pie{
position:absolute;
border: 2px solid #999;
top:10px;
right:100px;
bottom:-20px;
width:525px;
height:390px;
z-index: 2;
display: none;
}
.big_pie img {
width: 100%;
height: 100%;
}
这应该难不倒聪明的你们吧,所以就不再累述了,有不明白的朋友自行百度下css语法即可。
该准备的基本上都已经准备完成了,可是现在的问题来了,我们怎么才能得到我们想要的测试结果呢?只有准确的获取测试结果,我们才能准确的画出饼图。
庆幸的是,结果的收集和统计不需要我们自己去做,因为别人已经帮我们做好了,我们只要拿过来用就可以了。所以接下来我们只要想办法把图片路径传过去就可以了,修改的内容如下:
我们先找到getReportAttributes方法,然后在它下面添加红框内的语句,然后,再做如下修改:
我们先找到_generate_heading方法,然后修改红框1的内容,修改完之后,添加红框2的内容。
至此,我们需要的图片地址也可以获得了,接下来就该做鼠标事件了,这自然想到了js,所以我们需要在js部分添加以下代码:
/*显示饼图的大图*/
function bigImg() {
var big_pie = document.getElementById("big_pie")
big_pie.style.display = "block"
}
function normalImg() {
var big_pie = document.getElementById("big_pie")
big_pie.style.display = "none"
}
以上都完成之后,我们就可以看到测试报告中出现了我们想要的饼图,最终效果如下: