给测试报告添加饼图之修改HTMLTestRunner.py文件

看过我教程的小伙伴可能都知道，生成的测试报告是html格式的，并且每条测试用例都是以表格的形式展示出来的，当然了，这些种种，都不是我写的，而是通过htmlTestRunner.py文件来实现的，这个文件呢是从网上下载下来的，在此再次膜拜下写这个文件的大神。

但是，有时候还是会觉得报告不够直观，尤其是当测试用例很多的时候，表格一拉到底，看得人头疼，而最后仅有的几个统计结果的数据也显得不够明显，总觉得看起来不是很方便。所以呢，本着外行人看到都能了解测试结果的理念，我选择给报告添加饼图，这样一来，就可以很直观的看到每次执行的结果情况了。

那么，到底要怎么修改这个HTMLTestRunner.py文件呢？怎么往报告上添加饼图呢？饼图哪里来呢？我们来继续往下看。

首先，我们需要一个饼图，然后，我们需要将饼图插入html页面。

那就先来第一步，画饼图

画饼图有很多种方法，这里呢，我选择了python的matplotlib下的pyplot模块，话不多说，直接上代码：

labels = 'OK', 'NG'
fracs = [23, 1]
colors = ['green','red']
explode = [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()
plt.savefig(r"F:\aaaa.png")
'''
labeldistance，文本的位置离远点有多远，1.1指1.1倍半径的位置
autopct，圆里面的文本格式，%3.1f%%表示小数有三位，整数有一位的浮点数
shadow，饼是否有阴影
startangle，起始角度，0，表示从0开始逆时针转，为第一块。一般选择从90度开始比较好看
pctdistance，百分比的text离圆心的距离
patches, l_texts, p_texts，为了得到饼图的返回值，p_texts饼图内部文本的，l_texts饼图外label的文本
'''

上述代码画出来的饼图是这个样子的：



是不是看上去还不错呢？！现在我们的饼图已经有了，接下来要做的事情就是把这个饼图添加到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"
}

以上都完成之后，我们就可以看到测试报告中出现了我们想要的饼图，最终效果如下：



当鼠标放到小图上时，会展示大图，从小图上移开鼠标，大图就会被隐藏起来。

希望对大家有所帮助和启发，我也会努力学习，跟大家一起成长的。希望大家多多支持。