Postman进阶篇（十三）-接口响应可视化（Visualize）及在Visualize中显示解密后的响应

• Postman Visualizer提供了一种可编程的方式来直观地表示接口响应。
• Visualize可以将API返回的数据以易读且美观的方式呈现给用户，方便开发者更好地理解API接口的数据结构和内容。
• 不仅是可以更美观的展示响应，也可以将响应换一种形式展示，比如加密的响应可以将解密后的结果展示在这里。

一、功能介绍

• 在使用Postman请求接口时，响应结果通常是JSON、XML或HTML格式的数据。
• 如果直接查看这些数据，可能会出现以下问题：
  1. 数据太过复杂难以阅读：有些API接口的响应数据比较复杂，包含多层嵌套的对象、数组等，让人难以快速理解其结构和内容。
  2. 数据格式不规范：有些API接口返回的数据格式并不规范，导致阅读困难。
  3. 数据量过大：有些API接口返回的数据量可能比较庞大，让人难以快速筛选出所需信息。
• 针对以上问题，Postman提供了“Visualizing responses”功能，可以自动将响应数据转换成易读且美观的表格形式，展示API返回的数据结构及内容，并支持筛选、排序、搜索等操作，方便开发者快速定位所需信息。
  

二、使用方法（pm.visualizer.set）

• 下面我们来详细介绍一下这个功能的使用方法。
• 设置Visualize，需要在脚本中进行。

• 在专栏中也介绍过postman的两个脚本“pre-request script” ，“Test script”
  （pre-request script详细介绍、Test script详细介绍）

• 在脚本中，使用pm.visualizer.set()方法，即可设置展现在Visualize选项卡下的数据。

pm.visualizer.set()

• 方法接受模板字符串作为其第一个参数。第二个参数是要使用模板显示的数据。
• 下面这个是官方文档给出的例子，将响应数据中的name与email以表格形式展示。
  
• 完整代码如下：

var template = `
    <table bgcolor="#FFFFFF">
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>

        {
     
     {#each response}}
            <tr>
                <td>{
     
     {name}}</td>
                <td>{
     
     {email}}</td>
            </tr>
        {
     
     {/each}}
    </table>
`;

pm.visualizer.set(template, {
    
    
    response: pm.response.json()["data"]
});

• 将脚本填在tests脚本下
  
• 运行之后可以在响应，Visualize选项卡下看到处理过的数据
  

三、在Visualize中显示解密后的响应

• 我因为不是很删除前端的代码，所以没有使用到Visualize更深层次。
• 但我在工作中发现，有些解密后的接口响应非常适合放在Visualize中查看。
• 在专栏之前的文章有介绍过怎么解密接口响应，当时的办法是将解密之后的结果打印在console中。
  （Postman进阶篇（五）-实战：Test script解密接口返回结果（AES））
  
• 现在介绍另一种方式，将解密结果展示Visualize中。
• 增加一行解密后的设置visualize的代码

// data_dec_str:解密后的结果
pm.visualizer.set("<pre>" + data_dec_str + "</pre>")

• 这样就可以将结果显示在Visualize选项卡下。
  

附录：postman系列文章目录

零基础入门接口功能测试教程-目录
—————————————————————————————————
postman系列文章内所使用的示例文件已经上传到了本人运营公众号【软件测试必备技能】

有需要可点击文章下发二维码，前往领取~