欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

postman自动化测试 - 请求结果可视化

程序员文章站 2022-04-10 14:37:15
...

postman 请求结果可视化

可视化区域如下图:

postman自动化测试 - 请求结果可视化

  • postman可视化区域可以根据用户定义的模板可视化展示数据
  • 可视化区域还可以更形象的展示请求数据是否正确。
  • postman 模板采用数据绑定的方式,语法和小程序,vue,angular极其显示。
  • 编写可视化模板和脚本需要有一定的css,html和js基础。(入门即可)

第一步:请求数据

{
    "total": 2,
    "code": 200,
    "data": [
        {
            "id": "100001",
            "name": "鞠婧祎",
            "status": "3",
            "type": "3",
            "userId": "DRR"
        },
        {
            "id": "100002",
            "name": "迪丽热巴",
            "status": "3",
            "type": "3",
            "userId": "DRR"
        }
    ]
}
  • 请求数据如上所示,接下来定义可视化模板

第二步:添加模板

var template = `
    <style type="text/css">
        .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
        .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;}
        .tftable tr {background-color:#ffffff;}
        .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
        .tftable tr:hover {background-color:#e0ffff;}
    </style>

    <table class="tftable" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>状态</th>
            <th>类型</th>
            <th>用户ID</th>
        </tr>

        {{#each response.data}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td>{{@key}}</td>
                <td>{{name}}</td>
                <td>{{status}}</td>
                <td>{{type}}</td>
                <td>{{userId}}</td>
            </tr>
        {{/each}}
    </table>
`;
  • 注意 模板声明使用的是 ` 而不是 ’ ,这一点和vue 颇为相似,这个符号在 1键 左边 。

语法 (与小程序,vue,angular语法是否显示)

1 {{#each 数组}} 表示遍历数组,{{/each}} 为遍历的结束标签。
2 {{对象名}} 可以取出 数组对象的相应元素,例如 {{name}} 取出的就是 name属性的数据
3 {{@key}} 可以取出数组下标。

第三步,应用模板

pm.visualizer.set(template, {
    response: pm.response.json()
});

语法

pm.visualizer.set(模板名,数据);

第四步,请求并查看结果

可视化结果如下:

postman自动化测试 - 请求结果可视化

总结

  • 以上只是简单的应用了postman 结果可视化,如果需要展示图表信息,或者更漂亮的信息,可以引用第三方的插件,例如 D3.js,echarts.js
  • 如果引用第三方资源给大家推荐一个网站 https://www.bootcdn.cn/ ,特别全,而且可以自己通过互联网引用。
相关标签: postman