Java自動化測試框架-06 - 來給你的測試報告化個妝整個形 - （下）（詳細教程）

時間 2019-11-07

標籤 java 自動化測試框架來給報告整個詳細教程欄目 Java 简体版

原文原文鏈接

簡介

通過上一次的化妝和整形，有客戶提出需求能不能將那個普通會員的套餐再升級一下，再漂亮一點。因此此次我們就來看看從哪裏下刀可使它變得再漂亮一點點。javascript

上一篇文章修改了一些基本的ReportNG信息，連接：Java自動化測試框架-05 - 來給你的測試報告化個妝整個形 - （上），本文將繼續帶你們進行修改，重點是添加餅圖，將從普通會員升級到VIP會員。html

通過上次的整容恢復的差很少了，宏哥繼續帶領下夥伴們和同窗們折騰，給reportng來個二次開刀。java

第一刀

一、修改測試結果順序，修改TestResultComparator類compare方法express

二、參考代碼apache

//=============================================================================
// Copyright 2006-2013 Daniel W. Dyer
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//=============================================================================
package org.uncommons.reportng;

import java.util.Comparator;
import org.testng.ITestResult;

/**
 * Comparator for sorting TestNG test results alphabetically by method name.
 * @author Daniel Dyer
 */
class TestResultComparator implements Comparator<ITestResult>
{
//    public int compare(ITestResult result1, ITestResult result2)
//    {
//        return result1.getName().compareTo(result2.getName());
//    }
    public int compare(ITestResult result1, ITestResult result2)
    {
        //按照名稱排序顯示
//         return result1.getName().compareTo(result2.getName());
        //按照運行時間排序顯示
        int longresult2 = 0; 
        if(result2.getStartMillis()<result2.getStartMillis()){
            longresult2 = -1;
        }else{
            longresult2 = 1;
        }
        return longresult2;
    }
}

第二刀

一、添加餅圖,在overview.html.vm添加微信

二、參考代碼app

<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>

第三刀

一、繼續在overview.html.vm添加框架

二、參考代碼less

<div id='ichart-render'></div>

第四刀

一、給經過總數，失敗總數和跳過總數添加id屬性<td class="passRate suite">以前添加，找到#if($totalPassed>0),爲td標籤，添加id屬性，以下：測試

第五刀

一、添加餅圖js代碼，添加在</body>以前便可

二、參考代碼

<script type='text/javascript'>
    pcount=document.getElementById("tpn").innerHTML;
    fcount=document.getElementById("tfn").innerHTML;
    scount=document.getElementById("tsn").innerHTML;
    $(function(){
    var chart = iChart.create({
    render:"ichart-render",
    width:800,
    height:400,
    background_color:"#fefefe",
    gradient:false,
    color_factor:0.2,
    border:{
    color:"BCBCBC",
    width:0
    },
    align:"center",
    offsetx:0,
    offsety:0,
    sub_option:{
    border:{
    color:"#BCBCBC",
    width:1
    },
    label:{
    fontweight:500,
    fontsize:11,
    color:"#4572a7",
    sign:"square",
    sign_size:12,
    border:{
    color:"#BCBCBC",
    width:1
    }
    }
    },
    shadow:true,
    shadow_color:"#666666",
    shadow_blur:2,
    showpercent:false,
    column_width:"70%",
    bar_height:"70%",
    radius:"90%",
    subtitle:{
    text:"",
    color:"#111111",
    fontsize:16,
    font:"微軟雅黑",
    textAlign:"center",
    height:20,
    offsetx:0,
    offsety:0
    },
    footnote:{
    text:"",
    color:"#111111",
    fontsize:12,
    font:"微軟雅黑",
    textAlign:"right",
    height:20,
    offsetx:0,
    offsety:0
    },
    legend:{
    enable:false,
    background_color:"#fefefe",
    color:"#333333",
    fontsize:12,
    border:{
    color:"#BCBCBC",
    width:1
    },
    column:1,
    align:"right",
    valign:"center",
    offsetx:0,
    offsety:0
    },
    coordinate:{
    width:"80%",
    height:"84%",
    background_color:"#ffffff",
    axis:{
    color:"#a5acb8",
    width:[1,"",1,""]
    },
    grid_color:"#d9d9d9",
    label:{
    fontweight:500,
    color:"#666666",
    fontsize:11
    }
    },
    label:{
    fontweight:500,
    color:"#666666",
    fontsize:11
    },
    type:"pie2d",
    data:[
    {
    name:"Passed",
    value:pcount,
    color:"#44aa44"
    },{
    name:"Failed",
    value:fcount,
    color:"#ff4444"
    },{
    name:"Skipped",
    value:scount,
    color:"#FFD700"
    }
    ]
    });
    chart.draw();
    });
</script>

包紮縫合

此次的包紮縫合宏哥給大家換另外一個方式經過ant來導出jar。ant的安裝和配置在上一篇你們均可以看到的，這裏就不贅述了。

一、進入代碼目錄，將其build.xml的jar包版本修改爲1.1.8

二、導出jar包。成功。

三、到哪一個目錄下找到jar包。

四、新建項目引用jar包。

術後恢復效果圖：

小結

一、小夥伴可能按照宏哥的步驟操做到最後也會一臉懵逼的發現個人餅圖在哪裏，給誰吃掉了。來跟隨宏哥看看，究竟是被誰吃掉了。

（1）首先宏哥看了一看修改的代碼，複查了一遍沒有問題。

（2）完了宏哥忽然發現有一段引入圖標插件的js的代碼：<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>是經過一個網址引入的就是在動第二刀的時候，而後宏哥就試着訪問網址：http://www.ichartjs.com/ichart.latest.min.js，結果悲劇了訪問到以下：

（3）到這裏宏哥就肯定引入的JS有問題了，因此餅圖沒有出現那麼咱們網址訪問不到，那麼就下載一個到本地，在本地訪問

（4）完成之後，宏哥就開始導出jar包，而後引入jar包之後，仍然沒有出現餅圖。

（5）完了宏哥就抱着試一試的心理，把js拷貝到測試報告的文件夾中，再次看測試報告。

（6）餅圖出現了，原來是js仍是沒有被引入，先前作的僅僅是將js引入jar包，而沒有引入測試報告，要想引入測試報告還的修改一個地方的代碼，仿照上邊CSS和JS的引入，以下：

（7）再次導出jar包，測試報告的餅圖就出現了。

二、好了，關於這個就到這裏了。

有問題加入java自動化測試交流羣：694280102

我的公衆號 微信羣 （微信羣已滿100，能夠加宏哥的微信拉你進羣，請備註：進羣）

您的確定就是我進步的動力。若是你感受還不錯，就請鼓勵一下吧！記得點波推薦哦！！！（點擊右邊的小球便可！(^__^) 嘻嘻……）