接口自动化测试报告html模板

最新推荐文章于 2025-05-27 19:27:07 发布

原创

最新推荐文章于 2025-05-27 19:27:07 发布 · 置顶 · 1.6w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#自动化测试

博主分享了一篇关于接口自动化测试的报告，其中包含了饼图展示，报告内容包括项目名称、用例编号、用例名称、接口地址、接口方法和测试结果等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

研究了下好几个接口自动化报告的模板，自己改造了个带饼图的接口自动化模板，先贴报告吧~

在贴代码如下：

# *-*coding:utf-8*-*

"""
@version: Python3.4.4
@author: Hszhang
@time: 2017/6/14 16:34

- 使用bottle来动态生成html

- https://www.reddit.com/r/learnpython/comments/2sfeg0/using_template_engine_with_python_for_generating/

"""

from bottle import template
import webbrowser
import json
import sys

html_template = u"""
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>接口测试报告</title>
<meta name="generator" content="HTMLTestRunner 0.8.2.2"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>

<style type="text/css" media="screen">
body {
margin: 0;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
font-size: 18px;
line-height: 1.5;
line-height: 1.5;
color: #333333;
}

.table {
margin-bottom: 1px;
width: 100%;
}

.hiddenRow {
display: none;
}

.container-fluid {
padding-right: 120px;
padding-left: 120px;
}

.nav-tabs li {
width: 186px;
text-align: center;
}
</style>
</head>

<body >
<script language="javascript" type="text/javascript">

function showClassDetail(detail_id, hiddenRow_id, class_type) {
console.log(document.getElementById(hiddenRow_id).className)

if ('详细' == document.getElementById(detail_id).innerText) {
if ('all' == class_type) {
document.getElementById(hiddenRow_id).className = 'all';
}
else if ('success' == class_type) {
document.getElementById(hiddenRow_id).className = 'success';
}
else if ('error' == class_type) {
document.getElementById(hiddenRow_id).className = 'error';
}
else{
document.getElementById(hiddenRow_id).className = 'untreaded';
}
document.getElementById(detail_id).innerText = "收起"
}
else {
document.getElementById(detail_id).innerText = "详细"
document.getElementById(hiddenRow_id).className = 'hiddenRow';
}
}

</script>

<div class="container-fluid">
<div class="page-header">
<h1 class="text-primary" style="font-size:45px;line-height:75px">接口自动化测试报告</h1>
</div>

<div class="col-md-12">
<div class="col-md-4" style="Background-Color:#F5F5F5; height:300px">
<h3 style="line-height:25px">测试基本信息</h3>
<table class="table table-hover table-bordered" style="width:100% height:11px">
<tbody>
<tr class="info">
<td class="text-center">开始时间</td>
<td class="text-center">{ {start_time}}</td>
</tr>
<tr class="info">
<td class="text-center">结束时间</td>
<td class="text-center">{ {end_time}}</td>
</tr>
<tr class="info">
<td class="text-center">测试用时</td>
<td class="text-center">{ {used_time}}</td>
</tr>
<tr class="info">
<td class="text-center">总用例数</td>
<td class="text-center">{ {sum_all_cases}}</td>
</tr>
<tr class="info">
<td class="text-center">执行用例数</td>
<td class="text-center">{ {sum_executed_cases}}</td>
</tr>
<tr class="info">
<td class="text-center">跳过用例数</td>
<td class="text-center">{ {sum_untreaded_cases}}</td>
</tr>
</tbody>
</table>
</div>

<div class="col-md-8">