定制目的
最近接口測試和UI自動化測試都有用到reportng來做測試報告的展示,發現了幾個不是很方便的地方:
- 報告沒有本地化的選項
- 主頁的測試結果顯示的不夠清晰
- 測試詳情中的結果是按照名稱排列的,想用執行順序顯示
- 測試結果中添加日志
添加日志
測試結果添加日志,直接在測試代碼中添加Reporter.log("reportng日志顯示");
顯示在report的Log Output中的效果:
顯示在report的詳情中的效果:
本地化修改
獲取源碼,修改reportng.properties文件,reportng.properties中的內容是鍵值對,修改后面的值為中文即可。
passed=通過
修改測試結果順序
需要修改TestResultComparator類,參考鏈接:
class TestResultComparator implements Comparator<ITestResult> {
public int compare(ITestResult result1, ITestResult result2) {
// 按照名稱排序顯示
// return result1.getName().compareTo(result2.getName());
// 按照運行時間排序顯示
int longresult2 = 0;
if (result1.getStartMillis() < result2.getStartMillis()) {
longresult2 = -1;
} else {
longresult2 = 1;
}
return longresult2;
}
}
主頁添加餅圖顯示
主頁的餅圖用的是ichart開源圖形組件.
主頁的概括顯示在overview.html.vm頁面當中,先在文件中導入ichart組件。
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
添加餅圖的標簽
<div id='ichart-render'></div>
給通過總數,失敗總數和跳過總數添加id屬性
#if ($totalPassed > 0)
<td id="tpn" class="passed number">$totalPassed</td>
#else
<td id="tpn" class="zero number">0</td>
#end
#if ($totalSkipped > 0)
<td id="tsn" class="skipped number">$totalSkipped</td>
#else
<td id="tsn" class="zero number">0</td>
#end
#if ($totalFailed > 0)
<td id="tfn" class="failed number">$totalFailed</td>
#else
<td id="tfn" class="zero number">0</td>
#end
添加餅圖顯示的js代碼
<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:"通過",
value:pcount,
color:"#44aa44"
},{
name:"失敗",
value:fcount,
color:"#ff4444"
},{
name:"跳過",
value:scount,
color:"#FFD700"
}
]
});
chart.draw();
});
</script>
餅圖顯示效果:
修改完后的代碼地址
使用修改后的reportng
jar包下載
<!-- 依賴reportNg 關聯testNg -->
<dependency>
<groupId>org.uncommons</groupId>
<artifactId>reportng</artifactId>
<version>1.1.5</version>
<scope>system</scope>
<exclusions>
<exclusion>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
</exclusion>
</exclusions>
<systemPath>${project.basedir}/lib/reportng-1.1.5.jar</systemPath>
</dependency>
<dependency>
<groupId>velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.4</version>
</dependency>