一、思路
（1）上一篇我们录制下来了接口，并存放在了csv文件里
https://www.jianshu.com/p/1960eb58fdae
（2）接口回放：这个没什么好说的，都是python基本功，用requests类开发送请求
然后根据检查点来判断对错，因为这里只为说明，我的检查点做的比较粗糙，是全部响应内容匹配，实际工作中，这种做法并不可取，因为有些字段是变化的，所以我们要自定义检查点，可以是json的一个value值，也可以是html页面包含的关键字，全看自己的业务
（3）下面是jinja2：jinja2主要是实现html数据的动态展示
jinjia2的使用，首先要创建一个模版，在模板中将动态数据弄成变量，然后重新渲染，生成新的html文件
（4）layui是前端ui框架，跟vue一个意思，我用这个用习惯了，使用连接
https://www.layui.site/index.html
(5) Highcharts ：里面有很多图表样式，可以用来在网页上显示图表
https://www.highcharts.com.cn/demo/highcharts
最后能总体生成的效果如下
二、下面来展示一下重点位置的代码：
1、首先html页面的设计
（1）layui 资源引入
<head>
<meta charset="UTF-8">
<title>{{ title }}</title> #
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> #引入css资源包
</head>
其中：{{ title }} 就是要替换的变量
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>是引入的layui在线css资源包，最好选这个资源，因为别的在线资源会比较慢
（2） js引入 （ layui的js资源 ，jquery在线资源，hightchars的在线资源）
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/9.2.1/highcharts.js"></script>
2、分别展示pass，fail，skip表格的时候，其实是用jquery不停的切换显示隐藏状态，js实现如下
<script>
$(".summary-button").click(function () {
$(".summary_table").show()
$(".pic").show()
$(".pass_result_table").hide()
$(".fail_result_table").hide()
$(".skip_result_table").hide()
})
$(".pass-button").click(function () {
$(".summary_table").hide()
$(".pic").hide()
$(".pass_result_table").show()
$(".fail_result_table").hide()
$(".skip_result_table").hide()
})
$(".fail-button").click(function () {
$(".summary_table").hide()
$(".pic").hide()
$(".pass_result_table").hide()
$(".fail_result_table").show()
$(".skip_result_table").hide()
})
$(".skip-button").click(function () {
$(".summary_table").hide()
$(".pic").hide()
$(".pass_result_table").hide()
$(".fail_result_table").hide()
$(".skip_result_table").show()
})
</script>
要注意的是
这个地方会出一个问题
当做好点击pass按钮的时候，显示了一下下面的pass表格，但很快就消失了，那是因为我当是a标签写的是
<a href=""> 这代表默认会跳一个空链接，然后进行了刷新，所以页面又恢复到了初始状态，所以要让这个页面不能跳转，改成 <a href="javascript:;">
三、jinja2的使用
1、后端代码
def render_report(self,record_file_path):
api_data = self.get_render_data(record_file_path)
#获取模板位置，searchpath参数后面跟的是模板html文件所在的目录，可以写相对路径
loader = FileSystemLoader(searchpath=replay_report_model)
#Enviroment的类，这个类的实例用于存储配置和全局对象，然后从文件系统或其他位置中加载模板
env = Environment(loader=loader)
#get_template(): 获取模板目录下的某个具体模板文件，参数是模版文件名
template = env.get_template("replay_report_model.html")
#渲染模板，html中的参数，用{{ XX }}表示，记住 XX两边一定要有空格
temp_out =template.render(title=replay_report_title, replay_file_path=api_data["replay_file"],
replay_time=api_data["replay_time"], api_count=len(api_data["all_api"]),
pass_count=len(api_data["pass_api"]), fail_count=len(api_data["fail_api"]),
skip_count=len(api_data["skip_api"]), pass_api=api_data["pass_api"]
, fail_api=api_data["fail_api"], skip_api=api_data["skip_api"])
#将渲染后的html内容写入新的html文件
with open(replay_report, 'w', encoding='utf-8') as f:
f.writelines(temp_out)
f.close()
print("生成报告完毕")
2、html前端变量引用，顺便举个for循环的例子
{% for result in results %}
各种语句
{% end for %}
{% for each_pass_api in pass_api %}
<tr>
<td>{{ each_pass_api[0] }}</td>
<td>{{ each_pass_api[1] }}</td>
<td>{{ each_pass_api[2] }}</td>
<td>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">请求信息</h2>
<div class="layui-colla-content">
<p>headers：</p>
<p>{{ each_pass_api[3] }}</p>
<p>body:</p>
<p>{{ each_pass_api[4] }}</p>
</div>
</div>
</div>
</td>
<td>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">响应结果</h2>
<div class="layui-colla-content">
<p>响应状态码：{{ each_pass_api[5] }}</p>
<p>响应文本</p>
<p>{{ each_pass_api[6] }}</p>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
四、下面是Highcharts，举一个饼状图的例子
1、body中的引用
<div id="container1" style="min-width:350px;height:350px"></div>
2、script中的代码，拿饼图举例
<script>
Highcharts.chart('container1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enabled: false //去除水印
},
title: {
text: '测试结果百分比'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'pass',
y: {{ pass_count }},
sliced: true,
selected: true,
color: '#009688'
}, {
name: 'fail',
y: {{ fail_count }},
color: '#FF5722'
}, {
name: 'skip',
y: {{ skip_count }},
color: '#FFB800'
}]
}]
});
</script>
其中一些说明
去除highcharts图上的水印
credits: {
enabled: false //去除水印
}
jinja2变量的引用方式和上面一样{{ XX }}，同样在里面可以改变饼图中的颜色
data: [{
name: 'pass',
y: {{ pass_count }},
sliced: true,
selected: true,
color: '#009688'
}, {
name: 'fail',
y: {{ fail_count }},
color: '#FF5722'
}, {
name: 'skip',
y: {{ skip_count }},
color: '#FFB800'
}]
