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

本文链接：https://blog.csdn.net/weixin_43258703/article/details/121448464

一、思路
（1）上一篇我们录制下来了接口，并存放在了csv文件里
mitmproxy_录制接口并保存到csv_2021-10-30 - 简书

（2）接口回放：这个没什么好说的，都是python基本功，用requests类开发送请求
然后根据检查点来判断对错，因为这里只为说明，我的检查点做的比较粗糙，是全部响应内容匹配，实际工作中，这种做法并不可取，因为有些字段是变化的，所以我们要自定义检查点，可以是json的一个value值，也可以是html页面包含的关键字，全看自己的业务

（3）下面是jinja2：jinja2主要是实现html数据的动态展示
jinjia2的使用，首先要创建一个模版，在模板中将动态数据弄成变量，然后重新渲染，生成新的html文件

（4）layui是前端ui框架，跟vue一个意思，我用这个用习惯了，使用连接
https://www.layui.site/index.html

(5) Highcharts ：里面有很多图表样式，可以用来在网页上显示图表
Highcharts 演示 | Highcharts

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

image.png

二、下面来展示一下重点位置的代码：
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>

要注意的是

image.png

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