给测试报告添加饼图之修改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"
}

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

 

 

 

 

 

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

但愿对你们有所帮助和启发，我也会努力学习，跟你们一块儿成长的。但愿你们多多支持。