PostmanのVisualizeを使う。 Postman

PostmanでAPIにリクエストをしたり、APIのレスポンスをテストすることは大体できたので、今度はvisualizeの機能を試していきます。

過去の記事はこちら

• PostmanでAPIリクエストを作る
• Postmanを使ってAPIのテストをする

Postmanのvisualizeとは

ざっと説明するとAPIのレスポンスにhtmlをくっつけて表示できる機能で、これがPostmanのアプリ単体うごく感じです。 YoutubeのAPIを例に使ってやっていきます。

Visualize API responses

内容はこの記事とほぼ一緒です。

前準備

YoutubeのAPIを使うために、Youtube DATAAPIのappidを取得します。 これは公式ページの通りで大丈夫。

Youtube DATA APIの概要

Youtube APIへのリクエストを作る

APIのリクエストを作る手順でYoutubeへのアクセスできるリクエストを作ります。 クエリはdeadby daylightの最新日時順でソートするリクエストを作りました。 YOUR_APP_IDの部分に取得したAPPIDを入れます。

作成されたリクエストでJsonで結果が取れればOKです。

Visualize用のテンプレートを作る

テストコードを書いた時と同様にtestタブに行って、テンプレートと取得結果のマッピングを書きます。 response.jsonで取得したデータを下層に辿るのはドットでつなげばオーケーなので以下のように書きました。

var template = `
    <table>
        <tr bgcolor="coffee">
            <th>Title</th>
            <th>Thumb</th>
        </tr>

        {{#each response.items}}
            <tr bgcolor="white">
                <td>{{snippet.title}}</td>
                <td><img src="{{snippet.thumbnails.default.url}}"></td>
            </tr>
        {{/each}}
    </table>
`;

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

Visualizeの確認

templateを書いた状態で取得結果のjsonの上にあるvisualizeのボタンをクリックします。 うまくいけば検索結果がテーブルで表示されていると思います。

Postman公式のページにいくと、Bootstrapを読み込んで綺麗に表示させていたりするチュートリアルも合ったりするので、参考にするといいかも。

API開発した確認フェーズにこれを一回設定しておくと便利そうだなと思ったのと、まだ調べてないけど、それぞれのテストコード、テンプレートファイルを共有もできるっぽいので、 このPostmanのテスト全部通ったらOK、確認はVisualizeでやって！みたいな感じの仕事の回し方ができそう。

結構面倒そうな機能だったんだけど、かなり簡単にできたので、もうちょっと早く試してみればよかったな。