456 lines
14 KiB
HTML
456 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>测试报告</title>
|
||
|
||
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
|
||
<script src=" https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
|
||
<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
|
||
<!-- 页面样式-->
|
||
<style type="text/css">
|
||
/*标题样式*/
|
||
.title {
|
||
width: auto;
|
||
height: 60px;
|
||
text-align: center;
|
||
font: bolder 38px/60px "Microsoft YaHei UI";
|
||
}
|
||
|
||
/*汇总信息样式*/
|
||
.summary {
|
||
width: 90%;
|
||
position: absolute;
|
||
top: 120px;
|
||
margin-left: 5%;
|
||
|
||
}
|
||
|
||
.text-left {
|
||
font: bolder 20px/30px "Microsoft YaHei UI";
|
||
}
|
||
|
||
.left {
|
||
width: 50%;
|
||
float: left;
|
||
|
||
}
|
||
|
||
.right {
|
||
width: 50%;
|
||
float: right;
|
||
|
||
}
|
||
|
||
.desc {
|
||
float: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.list-group-item span {
|
||
font: normal 16px/38px "Microsoft YaHei UI";
|
||
padding: 30px;
|
||
|
||
}
|
||
|
||
.list-group-item {
|
||
position: relative;
|
||
display: block;
|
||
padding: .4rem 1.25rem;
|
||
background-color: #fff;
|
||
border: 1px solid rgba(0, 0, 0, .125);
|
||
}
|
||
|
||
/* 执行信息样式 */
|
||
.test_info {
|
||
width: 90%;
|
||
position: absolute;
|
||
top: 900px;
|
||
margin-left: 5%;
|
||
|
||
color: #28a745 !important;
|
||
}
|
||
|
||
.table td, th {
|
||
border: solid 2px rgba(9, 122, 51, 0.11) !important;
|
||
padding: 0;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
|
||
select {
|
||
border: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
height: 2em;
|
||
width: 8em;
|
||
margin-left: 2em;
|
||
}
|
||
|
||
option {
|
||
text-align: center;
|
||
height: 36px;
|
||
font: none 18px/36px "Microsoft YaHei UI";
|
||
color: #28a745 !important;
|
||
}
|
||
|
||
.test_log {
|
||
background: rgba(163, 171, 189, 0.15);
|
||
width: 100%;
|
||
height: 50px;
|
||
border-top: none;
|
||
border-bottom: none;
|
||
display: none;
|
||
text-align: left;
|
||
}
|
||
|
||
.test_log td {
|
||
text-align: left;
|
||
height: 30px;
|
||
margin: 0;
|
||
padding-left: 3em;
|
||
padding-right:3em;
|
||
font: none 18px/24px "Microsoft YaHei UI";
|
||
color: #9e141a;
|
||
}
|
||
|
||
pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
white-space: -moz-pre-wrap;
|
||
white-space: -o-pre-wrap;
|
||
word-wrap: break-word;
|
||
line-height: 22px;
|
||
font-size: 14px
|
||
}
|
||
|
||
/* 测试图表显示*/
|
||
.char {
|
||
width: 90%;
|
||
position: absolute;
|
||
top: 450px;
|
||
margin-left: 5%;
|
||
color: #28a745 !important;
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!--报告标题-->
|
||
<div class="title text-success">
|
||
<div class="shadow-lg p-3 mb-5 bg-white rounded">{{ title }}</div>
|
||
</div>
|
||
|
||
<!--汇总信息-->
|
||
<div class="summary">
|
||
<p class="text-left text-success">测试结果汇总</p>
|
||
<div class="left">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">测试人员</button>
|
||
<span class="text-dark">{{ tester }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">开始时间</button>
|
||
<span class="text-dark">{{ begin_time }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">执行时间</button>
|
||
<span class="text-dark">{{ runtime }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">用例总数</button>
|
||
<span class="text-dark">{{ all }}</span>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
<div class="right">
|
||
<ul class="list-group">
|
||
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">成功用例</button>
|
||
<span class="text-success">{{ success }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-warning">失败用例</button>
|
||
<span class="text-warning">{{ fail }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-danger">错误用例</button>
|
||
<span class="text-danger">{{ error }}</span>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-secondary">跳过用例</button>
|
||
<span class="text-secondary">{{ skip }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="desc">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<button type="button" class="btn btn-success">描述信息</button>
|
||
<span class="text-secondary">{{ desc }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!--测试图表-->
|
||
<div class="char">
|
||
<p class="text-left text-success">图表展示</p>
|
||
<div id="char2" style="width: 49%;height: 400px;float: left"></div>
|
||
<div id="char" style="width: 49%;height: 400px ;float: left"></div>
|
||
</div>
|
||
|
||
<!--详细信息-->
|
||
<div class="test_info">
|
||
|
||
<p class="text-left text-success">详细信息</p>
|
||
<div class="table_data">
|
||
|
||
<table class="table">
|
||
<thead class="bg-success text-light">
|
||
<tr>
|
||
<th scope="col" style="width: 5%;padding: 0">编号</th>
|
||
<th scope="col" style="width: 20%;padding: 0">
|
||
<span>测试类</span>
|
||
<select id="testClass">
|
||
<option>所有</option>
|
||
{% for foo in testClass %}
|
||
<option>{{ foo }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
|
||
</th>
|
||
|
||
<th scope="col" style="width: 15%;padding: 0">测试方法</th>
|
||
<th scope="col" style="width: 20%;padding: 0">用例描述</th>
|
||
<th scope="col" style="width: 15%;padding: 0">执行时间</th>
|
||
<th scope="col" style="width: 20%;padding: 0">
|
||
|
||
<span>执行结果</span>
|
||
<select id="testResult">
|
||
<option>所有</option>
|
||
<option class="text-success">成功</option>
|
||
<option class="text-warning">失败</option>
|
||
<option class="text-danger">错误</option>
|
||
<option class="text-info">跳过</option>
|
||
</select>
|
||
|
||
</th>
|
||
<th scope="col" style="width: 10%;padding: 0">详细信息</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for foo in results %}
|
||
<tr>
|
||
<td>{{ loop.index }}</td>
|
||
<td class="{{ foo.class_name }}">{{ foo.class_name }}</td>
|
||
<td>{{ foo.method_name }}</td>
|
||
<td>{{ foo.method_doc }}</td>
|
||
<td>{{ foo.run_time }}</td>
|
||
{% if foo.state == '成功' %}
|
||
<td class="text-success">{{ foo.state }}</td>
|
||
{% elif foo.state == '失败' %}
|
||
<td class="text-warning">{{ foo.state }}</td>
|
||
{% elif foo.state == '错误' %}
|
||
<td class="text-danger">{{ foo.state }}</td>
|
||
{% else %}
|
||
<td class="text-info">{{ foo.state }}</td>
|
||
{% endif %}
|
||
<td>
|
||
<button type="button" class="btn btn-success btn_info">查看详情</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr class="test_log">
|
||
|
||
<td colspan="7" class="small text-muted" style=" word-wrap:break-word; word-break:break-all">
|
||
{% for item in foo.run_info %}
|
||
|
||
<pre>{{ item }}</pre>
|
||
{% endfor %}
|
||
{% if foo.run_info == [] %}
|
||
<pre>无内容输出！</pre>
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="height: 200px"></div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
var tbodyTr = $('tbody tr');
|
||
var testResult = $("#testResult");
|
||
var testClass = $("#testClass");
|
||
<!-- 用例执行详细信息显示切换-->
|
||
$(".btn_info").click(function () {
|
||
$(this).parent().parent().next().toggle();
|
||
|
||
});
|
||
// 当选择用例类之后触发
|
||
testClass.change(function () {
|
||
var cls = $(this).val();
|
||
var res = testResult.val();
|
||
elementDisplay(cls, res);
|
||
sort()
|
||
});
|
||
testResult.change(function () {
|
||
var res = $(this).val();
|
||
var cls = testClass.val();
|
||
elementDisplay(cls, res);
|
||
sort()
|
||
});
|
||
|
||
function elementDisplay(cls, res) {
|
||
// 用例数据的显示
|
||
if (cls === "所有") {
|
||
if (res === "所有") {
|
||
tbodyTr.has('button').show();
|
||
} else if (res === '成功') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.text-success').show()
|
||
|
||
} else if (res === '失败') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.text-warning').show()
|
||
|
||
} else if (res === '错误') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.text-danger').show()
|
||
|
||
} else if (res === '跳过') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.text-info').show()
|
||
}
|
||
} else {
|
||
if (res === "所有") {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.' + cls + '').show()
|
||
} else if (res === '成功') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.' + cls + '').has('.text-success').show()
|
||
} else if (res === '失败') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.' + cls + '').has('.text-warning').show()
|
||
} else if (res === '错误') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.' + cls + '').has('.text-danger').show()
|
||
} else if (res === '跳过') {
|
||
tbodyTr.hide();
|
||
tbodyTr.has('button').has('.' + cls + '').has('.text-info').show()
|
||
}
|
||
}
|
||
}
|
||
|
||
function sort() {
|
||
//重新排列显示序号
|
||
// 选择所有可以见的tr
|
||
var visibleTr = tbodyTr.filter(":visible");
|
||
|
||
visibleTr.each(function (index, element) {
|
||
element.firstElementChild.innerHTML = index + 1;
|
||
|
||
})
|
||
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('char'));
|
||
var myChart2 = echarts.init(document.getElementById('char2'));
|
||
// 指定图表的配置项和数据
|
||
option = {
|
||
color: ['#009933', '#FF6666', '#CC0066', '#009999'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 10,
|
||
data: ['通过', '失败', '错误', '跳过']
|
||
},
|
||
series: [
|
||
{
|
||
name: '测试结果',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '30',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: {{success}}, name: '通过'},
|
||
{value: {{fail}}, name: '失败'},
|
||
{value: {{error}}, name: '错误'},
|
||
{value: {{skip}}, name: '跳过'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
option2 = {
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%'
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '测试结果',
|
||
type: 'gauge',
|
||
detail: {formatter: '{{pass_rate}}%'},
|
||
data: [{value: '{{pass_rate}}', name: '用例通过率'}],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[0.2, '#CC0066'],
|
||
[0.8, '#FF6666'],
|
||
[1, '#009933']
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
myChart2.setOption(option2);
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |