前言
之前的文章呢,我们做了数据的存储,那么我们如何把它怎么体现在测试报告中呢,本文将带着你去揭秘如何展示
正文
我们如何展示这些数据呢,最简单的方式呢,就是直接展示数据,为了让我们的测试报告更加的高大上呢,我们引入数据展示,选择了百度 的echarts。官网如下:
https://echarts.apache.org/examples/zh/index.html
在官网,我们可以选择很多的漂亮的展示图。我们选择
https://echarts.apache.org/examples/zh/editor.html?c=line-stack
模板作为展示。我们稍微调整下
这样就满足了我们展示的需求,我们可以下载对应的代码,然后在我们的测试报告中去展示我们的数据。我们需要 去改造我们的BSTestRunner.py。
大概的思路,我们去在测试报告的中增加一个div 用于展示测试报告,然后去增加对应js。最后和原来的拼接成新的HTML。
第一,我们去在HTML_TMPL增加echarts的js
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
然后在container后增加scripts
%(scripts)s
第二步,我们在heading后增加一个div
HEADING_TMPL = """<div class='heading'>
<h1>%(title)s</h1>
%(parameters)s
<p class='description'>%(description)s</p>
</div>
<div id='containerchart' style='height: 300px'></div>
"""
第三步,我们去定义一个js的常量,对应的变量用占位符占用
SCRPICT=r"""
<script language='javascript' type='text/javascript'>
var dom = document.getElementById('containerchart');
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: {
text: '性能数据'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['cpu', '内存']
},
grid: {
left: '3%%',
right: '4%%',
bottom: '3%%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: %(name)s
},
yAxis: {
type: 'value'
},
series: [
{
name: 'cpu',
type: 'line',
stack: '总量',
data: %(cpu)s
},
{
name: '内存',
type: 'line',
stack: '总量',
data: %(men)s
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
if (option && typeof option === 'object') {
myChart.setOption(option);
}
output_list = Array();
/* level - 0:Summary; 1:Failed; 2:All */
function showCase(level) {
trs = document.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
tr = trs[i];
id = tr.id;
if (id.substr(0,2) == 'ft') {
if (level < 1) {
tr.className = 'hiddenRow';
}
else {
tr.className = '';
}
}
if (id.substr(0,2) == 'pt') {
if (level > 1) {
tr.className = '';
}
else {
tr.className = 'hiddenRow';
}
}
}
}
function showClassDetail(cid, count) {
var id_list = Array(count);
var toHide = 1;
for (var i = 0; i < count; i++) {
tid0 = 't' + cid.substr(1) + '.' + (i+1);
tid = 'f' + tid0;
tr = document.getElementById(tid);
if (!tr) {
tid = 'p' + tid0;
tr = document.getElementById(tid);
}
id_list[i] = tid;
if (tr.className) {
toHide = 0;
}
}
for (var i = 0; i < count; i++) {
tid = id_list[i];
if (toHide) {
document.getElementById('div_'+tid).style.display = 'none'
document.getElementById(tid).className = 'hiddenRow';
}
else {
document.getElementById(tid).className = '';
}
}
}
function showTestDetail(div_id){
var details_div = document.getElementById(div_id)
var displayState = details_div.style.display
if (displayState != 'block' ) {
displayState = 'block'
details_div.style.display = 'block'
}
else {
details_div.style.display = 'none'
}
}
function html_escape(s) {
s = s.replace(/&/g,'&');
s = s.replace(/</g,'<');
s = s.replace(/>/g,'>');
return s;
}
</script>
</body>
</html>"""
第四步,获取存储的性能数据
def _getdata(self):
file_pash=os.path.join(BASH_DIR,perdata)
reslut=read(file_pash)
name = []
cpu = []
mem = []
for key, value in reslut.items():
name.append(key)
cpu.append(value['cpu'])
mem.append(value['mem'])
return name,cpu,mem
第五步实现js的代码拼接,
def _generate_scrpit(self):
name,cpu,mem=self._getdata()
result=self.SCRPICT % dict(name=name,cpu=cpu,men=mem)
print("result--",result)
return result
第六步 测试报告产生的时候增加echarts的代码
def generateReport(self, test, result):
report_attrs = self.getReportAttributes(result)
generator = 'BSTestRunner %s' % __version__
stylesheet = self._generate_stylesheet()
heading = self._generate_heading(report_attrs)
report = self._generate_report(result)
ending = self._generate_ending()
scrpit=self._generate_scrpit()
output = self.HTML_TMPL % dict(
title=saxutils.escape(self.title),
generator=generator,
stylesheet=stylesheet,
scripts=scrpit,
heading=heading,
report=report,
ending=ending
)
self.stream.write(output)
修改完毕,我们直接去 执行即可。展示后结果如下:
最新代码已经提交
https://gitee.com/liwanlei/appiumdemo
后记
发现问题,解决问题。遇到问题,慢慢解决问题即可。
欢迎关注雷子说测试开发,后续将会持续为大家分享更多的技术知识