TestRunner默认生成的测试报告是介样的:
结合Echart生成的报告是这样的:
虽然暂时只是看起来高大上了,提高了PM的体验,然而对开发。。。
Q:如何实现?
A:简单来说就是通过修改HTMLTestRunner.py这个包的源代码,让其中用于创建HTML文件的部分按照我们的想法去执行。
在源码中类 Template_mixin(object)中的 代码就是测试报告的网页源码。
大致说明一下,js代码在前,css样式代码在中,HTML代码在下,(如果觉得 测试报告中 时间和表格的表头 等需要汉化 或是想改改样式就去相应的修改就好)
继续,现在进行第一步,我们需要在这段代码中加入需要引入的echart.js。(由于不少自动化测试完成后需要发送邮件,把js文件一遍遍发出去不好,所以直接在线引入),找到<body>标签,然后在下面加上一行。
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
第二步,配置显示的图表,根据Echart提供的使用文档,我们在js区域中定义绘制echart的函数
function drawechart(e_pass,e_fail,e_error){
var dom = document.getElementById('container');
var myChart = echarts.init(dom);
option = {
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%%)"
},
color:['#73bf00','#ff8000','#ce0000'],
label: {
normal: {
show: true,
formatter: "({d}%%)",
position: 'inner'
}
},
legend: {
orient: 'vertical',
left: 'left',
data: ['通过','失败','报错']
},
series : [
{
name: 'run test',
type: 'pie',
selectedMode: 'single',
label: {
normal: {
formatter: '{b}:{d}%% ({c}个)',
position: 'inside'
}
},
data:[
{value:e_pass, name:'通过'},
{value:e_fail, name:'失败'},
{value:e_error, name:'报错',selected:true},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}
敲黑板!!!需要注意python中%的转义,否则报错 TypeError: not enough arguments for format string
第三步,在HTML区域加入,绘制函数。
<script>
var epass = %(Pass)s;
var efail = %(fail)s;
var eerror = %(error)s;
drawechart(epass,efail,eerror);
</script>
%()s,是传参方式。pass fail error,testrunner自己定义过了,直接传。
就是这样了,写个demo试试吧