一、思路
（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 资源引入
{{ title }} #
#引入css资源包
其中：{{ title }} 就是要替换的变量
是引入的layui在线css资源包，最好选这个资源，因为别的在线资源会比较慢
（2） js引入 （ layui的js资源 ，jquery在线资源，hightchars的在线资源）
2、分别展示pass，fail，skip表格的时候，其实是用jquery不停的切换显示隐藏状态，js实现如下
要注意的是
这个地方会出一个问题
当做好点击pass按钮的时候，显示了一下下面的pass表格，但很快就消失了，那是因为我当是a标签写的是
这代表默认会跳一个空链接，然后进行了刷新，所以页面又恢复到了初始状态，所以要让这个页面不能跳转，改成
三、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 %}
{{ each_pass_api[0] }}
{{ each_pass_api[1] }}
{{ each_pass_api[2] }}
请求信息
headers：
{{ each_pass_api[3] }}
body:
{{ each_pass_api[4] }}
响应结果
响应状态码：{{ each_pass_api[5] }}
响应文本
{{ each_pass_api[6] }}
{% endfor %}
四、下面是Highcharts，举一个饼状图的例子
1、body中的引用
2、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'
}]