修改HTMLTestRunner.py文件添加饼图

本来转载自：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"
}

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