可视化响应

Postman 提供了一种可编程的方式来直观地表示您的请求响应添加到请求测试的可视化代码将呈现在响应正文的“可视化”选项卡中,以及“漂亮”、“原始”和“预览”选项。

可视化器渲染

可视化工具让您以有助于理解它的方式呈现您的响应数据。您可以使用可视化工具来建模和突出显示与您的项目相关的信息,而不必阅读原始响应数据。当您共享 Postman 集合时,您团队中的其他人也可以在每个请求的上下文中看到您的可视化。

内容

可视化响应数据


要可视化您的响应数据,请将代码添加到请求的Pre-requestTests 脚本。该pm.visualizer.set()方法会将您的可视化工具代码应用于数据,并在请求运行时将其呈现在“可视化”选项卡中。

添加可视化代码

pm.visualizer.set()方法接受Handlebars模板字符串作为其第一个参数。第二个参数应该是您要使用模板显示的数据。继续阅读以了解如何构建 Handlebars 模板并将数据传递给它。

呈现 HTML

要查看基本的可视化工具,请在 Postman 中打开以下请求:

在邮递员中运行

示例端点使用具有以下 JSON 响应正文结构的名称和电子邮件地址列表进行响应:

[
    {
        "name": "Alice",
        "email": "alice@example.com"
    },
    {
        "name": "Jack",
        "email": "jack@example.com"
    },
    // ... and so on
]

可视化工具代码创建一个 Handlebars 模板,通过循环遍历一个数组来呈现一个显示姓名和电子邮件地址的表格。车把可以通过{{#each}}标签做到这一点。此脚本在请求Tests中运行:

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()方法的数据替换。为了应用模板,下面的代码完成了测试脚本:

// Set visualizer
pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()
});

template变量是之前创建的模板字符串。传递的第二个参数是一个定义为response属性的对象——这是模板在{{#each response}}循环中期望的变量。分配给该response属性的值是解析为对象的请求的响应 JSON 数据。

查看可视化

在 Postman 中发送请求并选择Visualize选项卡以查看表格。

可视化器表格渲染

表格呈现为 HTML,就像它在 Web 浏览器中一样。

为可视化添加样式和交互

您可以使用 HTML 模板代码中的标签加载外部样式表<link>,使用与将样式表添加到网页相同的技术。您还可以将样式表添加为<style>标签。<script>同样,您可以在模板 HTML 代码内的标签中使用 JavaScript 代码添加交互。

使用自己的库

您可以使用Postman Sandbox中的任何库以编程方式生成布局模板。要导入额外的外部 JavaScript 库,请将 URL 添加到<script>模板代码中的标记,使用与将 JavaScript 加载到 HTML 文件中相同的方法。这使您可以使用您选择的可视化工具(例如 D3.js)呈现您的请求数据。

访问模板内的数据

模板中的任何元素都可以通过调用该方法<script>来访问第二个参数中传递的数据。这仅适用于模板中的 JavaScript 代码,例如,如果您的模板包含用于呈现图表的代码。pm.visualizer.set()pm.getData(callback)

pm.getData(callback)方法将回调函数作为其参数。此回调接受两个参数:errordata。第二个参数是data传递给的pm.visualizer.set()

试试看

通过导入以下任何集合来查看更多可视化器代码。使用在 Postman 中运行按钮从每个文档中导入。导入集合 >在 Postman 的左侧边栏中打开来自集合的请求 > 选择发送以运行它。您将在Visualize中看到呈现的数据。

条形图

热图

地图可视化器

可视化工具 API

您可以从Postman API访问可视化工具。该pm.visualizer.set()方法接受三个参数:

  • layout(必需):第一个参数是Handlebars HTML 模板字符串。
  • data(可选):第二个参数是可以绑定到模板的数据。可以在模板中访问该对象的属性。
  • options(可选):第三个参数optionsHandlebars.compile(). 您可以使用它来控制 Handlebars 如何编译模板。

Postman 使用您传递的信息pm.visualizer.set()在可视化工具的沙箱中呈现 HTML 页面。您将在Visualize选项卡中看到这个呈现的 HTML 页面。该layout字符串被插入到<body>呈现页面的 中,包括模板包含的任何 JavaScript、CSS 和 HTML。

调试可视化工具

您可以在 Postman 中通过右键单击Visualize区域并选择检查可视化来调试可视化。这将打开附加到沙箱的可视化开发工具。您可以像调试网页一样使用它。

在 Postman 中调试可视化工具

下一步

您可以尝试使用上面列出的集合作为起点尝试可视化,并调整代码以获得您自己的数据所需的结果。有关 Postman 如何在脚本中访问您的响应数据的更多信息,请查看测试示例