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

旧城等待， 2023-06-22 13:56 92阅读 0赞

# postman 请求结果可视化 #

可视化区域如下图:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

*  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"
            }
        ]
    }

*  请求数据如上所示，接下来定义可视化模板

## 第二步：添加模板 ##

*  注意 模板声明使用的是 \` 而不是 ’ ,这一点和vue 颇为相似，这个符号在 1键 左边 。

### 语法 （与小程序，vue，angular语法是否显示） ###

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

## 第三步，应用模板 ##

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

### 语法 ###

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

## 第四步，请求并查看结果 ##

可视化结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

## 总结 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191216184918455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191216184945734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9rZWVwZ29vbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70