mitmproxy_接口回放+jinja2+layui+Highcharts+jquery+生成html测试报告_2021-11-06

一、思路
（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

最后能总体生成的效果如下

image.png

image.png

二、下面来展示一下重点位置的代码：
1、首先html页面的设计
（1）layui 资源引入

    
      #
     #引入css资源包

其中：{{ title }} 就是要替换的变量
是引入的layui在线css资源包，最好选这个资源，因为别的在线资源会比较慢

（2） js引入 （ layui的js资源 ，jquery在线资源，hightchars的在线资源）

2、分别展示pass，fail，skip表格的时候，其实是用jquery不停的切换显示隐藏状态，js实现如下

要注意的是

image.png

这个地方会出一个问题
当做好点击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'
            }]