Postmanのまとめに戻る

参考

Visualize request responses using Postman Visualizer

Postman Visualizer は、リクエストレスポンスを視覚的に表現するプログラム可能な方法を提供します。リクエストのテストに追加された視覚化コードは、Pretty、Raw、および Preview オプションと並んで、応答本文の[Visualize]タブにレンダリングされます。

Visualizer を使用すると、レスポンスデータを理解しやすい方法で表示できます。これを使用すると、生のレスポンスデータを読み込む代わりに、プロジェクトに関連する情報をモデル化して強調表示できます。Postman Collection を共有すると、チームの他のメンバーも各リクエストのコンテキスト内でビジュアライゼーションを理解できるようになります。

レスポンスデータの可視化

レスポンスデータを視覚化するには、リクエストの事前リクエストまたはテストスクリプトにコードを追加します。このpm.visualizer.set() メソッドは、ビジュアライザーコードをデータに適用し、リクエストの実行時に[視覚化]タブに表示します。

ビジュアライザーコードの追加

このメソッドは、 Handlebarsテンプレート文字列を最初のパラメータとしてpm.visualizer.set()受け入れます。2 番目のパラメータは、テンプレートを使用して表示するデータです。Handlebars テンプレートを構築してそれにデータを渡す方法を学習してください。

HTMLのレンダリング

Visualizer の動作例については、Postman で次のコレクションを開きます。

最初のリクエストでは、サンプルエンドポイントは、次の JSON 応答本文構造を持つ名前と電子メールアドレスのリストで応答します。

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

Visualizer コードは、配列をループすることによって名前と電子メールアドレスを表示するテーブルをレンダリングするための Handlebars テンプレートを作成します。ハンドルバーはタグを使用してこれを行うことができます{{#each}}。このスクリプトはリクエストTestsで実行されます。

Jsonで返ってくる項目名をHTMLでは{{}}の変数名として使う？

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は、前に作成したテンプレート文字列です。渡される 2 番目の引数は、プロパティとして定義されたオブジェクトですresponse。これは、テンプレートがループ内で予期する変数です{{#each response}}。プロパティに割り当てられる値は、responseオブジェクトとして解析されたリクエストからの応答 JSON データです。

ビジュアライゼーションの表示

Postman でリクエストを送信し、「視覚化」タブを選択します。Postman は、Web ブラウザーと同様に、テーブルを HTML としてレンダリングします。

ビジュアライゼーションにスタイルとインタラクションを追加する

＜link＞Web ページにスタイルシートを追加するのと同じ手法を使用して、HTML テンプレートコード内のタグを使用して外部スタイルシートを読み込むことができます。スタイルシートをタグとして追加することもできます＜style＞。＜script＞同様に、テンプレート HTML コード内のタグ内の JavaScript コードを使用してインタラクションを追加できます。

Visualizer は、リソースをダウンロードするインタラクションをサポートしていません。

独自のライブラリを使用する

Postman Sandboxのライブラリのいずれかを使用して、プログラムでレイアウトテンプレートを生成できます。＜
script＞別の外部 JavaScript ライブラリをインポートするには、 JavaScript を HTML ファイルにロードする場合と同じ方法を使用して、テンプレートコードのタグに URL を追加します。これにより、選択した視覚化ツール (D3.js など) を使用してリクエストデータをレンダリングできるようになります。

テンプレート内のデータへのアクセス

＜script＞テンプレート内のすべての要素は、メソッドpm.visualizer.set()を呼び出すことによって2 番目の引数で渡されたデータにアクセスできますpm.getData(callback)。これは、テンプレート内の JavaScript コードにのみ適用されます (たとえば、テンプレートにグラフをレンダリングするコードが含まれている場合)。

このpm.getData(callback)メソッドはパラメータとしてコールバック関数を受け取ります。このコールバックは、errorとの2 つのパラメータを受け入れますdata。2 番目のパラメータはdataに渡されたですpm.visualizer.set()。

Postbot を使用してビジュアライゼーションを作成する

リクエストのビジュアライゼーションの書き方がわからないですか? ポストボットに聞いてください！やりたいことを平易な言葉で Postbot に伝えると、Postman が人工知能を使用して視覚化を生成します。Postbot を使用して、新しいビジュアライゼーションの作成、ビジュアライゼーションの種類の変更、既存のビジュアライゼーションの修正などを行います。

Postbot を使用してビジュアライゼーションを作成するには、次の手順を実行します。

リクエストを送信すると、応答が得られます。
レスポンスの「本文」タブで、「視覚化」タブを選択します。
[レスポンスの視覚化]メニューで、テーブル、チャート、またはグラフビジュアライザーを選択します。プロンプトを使用してセットアップを選択し、単純なテキスト文を入力して、平易な言語を使用して Postbot に何をしたいかを伝えることもできます。

Postman はAIを使用して視覚化を生成します。

たとえば、Postbot を使用して、「新しいビジュアライゼーションを作成する」、「ビジュアライゼーションの種類を変更する」、「既存のビジュアライゼーションを修正する」などのフレーズを試してみてください。

Postbot の詳細については、「Postbot について」を参照してください。

やってみて

実際の Visualizer コードの例をさらに参照するには、コレクションをフォークして、次のコレクションのいずれかをワークスペースに追加します。コレクションをエクスポートしてからインポートすることもできます。コレクションをフォークまたはインポートした後、サイドバーの「コレクション」からリクエストを開き、「送信」を選択します。Postman は、レンダリングされたデータを[視覚化]タブに表示します。

ChartJSを使用して棒グラフをレンダリングするDIYコレクション

ヒートマップの視覚化

さまざまなチャートとグラフの例

サンプルコレクションテンプレートで実際にデータを視覚化することができます。このテンプレートを試してみるには、データ視覚化を選択します。

ビジュアライザー API

Visualizer にはPostman APIからアクセスできます。このpm.visualizer.set()メソッドは 3 つのパラメータを取ります。

layout(必須): 最初のパラメータは、Handlebars HTML テンプレート文字列です。
data(オプション): 2 番目のパラメーターは、テンプレートにバインドできるデータです。このオブジェクトのプロパティには、テンプレートでアクセスできます。
options(オプション): 3 番目の引数はのoptionsオブジェクトですHandlebars.compile()。これを使用して、Handlebars がテンプレートをコンパイルする方法を制御できます。

Postman は、渡された情報を使用して、pm.visualizer.set()Visualizer のサンドボックスで HTML ページをレンダリングします。レンダリングされた HTML ページの「視覚化」タブを選択します。テンプレートに含まれる JavaScript、CSS、HTML などの文字列が、レンダリングされたページのlayoutに挿入されます。

ビジュアライザーのデバッグ

Postman でビジュアライゼーションをデバッグするには、「ビジュアライズ」領域を右クリックし、「ビジュアライゼーションの検査」を選択します。これにより、サンドボックスに接続されている Visualizer 開発者ツールが開きます。Web ページのデバッグと同じように使用できます。

Visualizer Developer Tools は、Postman デスクトップアプリでのみ使用できます。

次のステップ

Postman での応答の視覚化について学習したので、独自の視覚化の作成を開始できます。

まず、More Visualizer サンプルワークスペースを試してみてください。サンプルリクエストを実行し、コードを調整して独自のデータに必要な結果を取得します。
Postman がスクリプト内の応答データへのアクセスを提供する方法の詳細については、「テスト例」を参照してください。