給測試報告添加餅圖之修改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"
}

以上都完成以後，咱們就能夠看到測試報告中出現了咱們想要的餅圖，最終效果以下：

 

 

 

 

 

當鼠標放到小圖上時，會展現大圖，從小圖上移開鼠標，大圖就會被隱藏起來。

但願對你們有所幫助和啓發，我也會努力學習，跟你們一塊兒成長的。但願你們多多支持。