ITツールの機能紹介-Playwright内でAPIを使う

By /

つ～じ～です。ゲーマー界隈で話題のニンテンドースイッチ2、当選しました！！　皆さんはどうでしょうか、何とか発売日にみんなで遊びたいです。

さて、今回も開拓していきますPlaywright。導入当初こそ初めての事ばかりで億劫な気持ちもありましたが、慣れてくると便利すぎてヤバいです。直近出来るようになった事だけでも、

  • 自動テスト中にAPIを実行し、レスポンスデータを取得
  • 自動テスト中にCSV作成
  • 自動テスト中にGmailを取得し、本文のリンクにアクセス
  • 自動テスト中に行われたコピー処理後のクリップボードチェック
  • 画面上にある表を検索し、検索対象の隣のデータに処理実行

などなど、元々利用していたSeleniumIDEではできなかったことが多くできるようになりました。

今回は上記の内の『自動テスト中にAPIを実行し、レスポンスデータを取得』についてご紹介します。

自動テスト中にAPIを実行し、レスポンスデータを取得する方法

※ツールはVSCode、言語はTypeScriptを使用しております。

※以下に記載したコードは、弊社で利用しているAPI作成コードを、本稿用に大幅アレンジを加えたものです。すべて仮データに置換しており、実在のプロジェクトのデータは使用しておりません。

// APIリクエスト用のライブラリをインポート。ついでに判定用のexpectもインポート
import { APIRequestContext, expect,  } from '@playwright/test';

// アイテム作成APIを実行する関数
export async function item_api_test(request: APIRequestContext): Promise<string> {
  // APIエンドポイント
  const apiUrl = `https://api.${process.env.environment}/api/ver1/item_request_test`;

  //// 【取扱注意】このトークンを含むこのファイルはGitにコミットしない事！！////
  // Token（例: Bearerトークン）
  const token = 'abcdefghijklmnopqrstuvwxyz1234567890';
  //// 【取扱注意】このトークンを含むこのファイルはGitにコミットしない事！！////
  
  // リクエストBody
  const requestBody = {
    "request_code":"AUTO_TEST",
    "company":"株式会社イーツー・インフォ",
    "items":[
      {
        "item_code":"abcdefg",
        "item_num":1,        
      }
    ]
  };

  // POSTリクエストを送信
  const response = await request.post(apiUrl, {
    headers: {
      'Authorization': `Bearer ${token}`, // Tokenを設定
      'Content-Type': 'application/json', // JSON形式のBodyを送信
    },
    data: requestBody, // Bodyを設定
  });

  // ステータスコードのリスト 200番台ならOKとする
  const validStatusCodes = [200, 201, 202];

  // ステータスコードを検証 ステータスが200番台かどうかをチェック
  expect(validStatusCodes).toContain(response.status());

  // レスポンスBodyを取得
  const responseData = await response.json();
  console.log('APIレスポンス:', responseData); // レスポンスの内容をログに出力

  // アイテムURLを返す
  return responseData.items[0].item_url;
}

概要解説

// APIリクエスト用のライブラリをインポート。ついでに判定用のexpectもインポート
import { APIRequestContext, expect, } from ‘@playwright/test’;

まずはAPIに必要なライブラリをインポートします。こちら嬉しい事にPlaywrightのインストールが済んでいれば追加インストールは必要ありません！　Playwrightのデフォルトライブラリの一つです。便利！！

// APIエンドポイント
const apiUrl = `https://api.${process.env.environment}/api/ver1/item_request_test`;

//// 【取扱注意】このトークンを含むこのファイルはGitにコミットしない事！！////
// Token（例: Bearerトークン）
const token = ‘abcdefghijklmnopqrstuvwxyz1234567890’;
//// 【取扱注意】このトークンを含むこのファイルはGitにコミットしない事！！////

// リクエストBody
const requestBody = {
“request_code”:”AUTO_TEST”,
“company”:”株式会社イーツー・インフォ”,
“items”:[
{
“item_code”:”abcdefg”,
“item_num”:1,
}
]
};

APIのリクエストに使用するデータを作成します。この時、トークンの扱いには注意が必要です。
現在はAPI実行関数を書いたテストファイルはGitにコミットせず、別の形で管理する方向で管理しております。
本当は「会社専用のGドライブにトークン情報を記載し、テストの度に参照する」ようなやり方を模索していたのですが、思ったようにうまくいかなかったため、上記のやり方と相成りました。
今後技術開拓が出来たら参照タイプにしていきたいと思います。

// POSTリクエストを送信
const response = await request.post(apiUrl, {
headers: {
‘Authorization’: `Bearer ${token}`, // Tokenを設定
‘Content-Type’: ‘application/json’, // JSON形式のBodyを送信
},
data: requestBody, // Bodyを設定
});

// ステータスコードのリスト 200番台ならOKとする
const validStatusCodes = [200, 201, 202];

// ステータスコードを検証 ステータスが200番台かどうかをチェック
expect(validStatusCodes).toContain(response.status());

実際にリクエストを実行している部分です。ヘッダーに加え、上述で作成したリクエストデータも組み込んでおります。上記はPOSTリクエストですが、GETやPUT等の一般的なリクエストコマンドは全て利用可能です。

responseにはステータスコードも格納されるため、そのコードの値をPlaywrightの機能でチェックしております。

// レスポンスBodyを取得
const responseData = await response.json();
console.log(‘APIレスポンス:’, responseData); // レスポンスの内容をログに出力

// アイテムURLを返す
return responseData.items[0].item_url;
}

最後にレスポンスデータを取得します。一般的にはレスポンスはjson形式で管理されているため、まずはjson形式に変換します。

結果的に以下のようなレスポンスになったとして、

APIレスポンス: {
　request_code:'AUTO_TEST',
　company:'株式会社イーツー・インフォ',
　items:[
　　{
　　　item_code:'abcdefg',
　　　item_name:'テスト商品A',
　　　item_url:'https://www.e2info.co.jp/',
　　　item_num:1,
　　}
　]
}

『responseData.items[0].item_url;』のような書き方をすれば、レスポンスデータ内の

https://www.e2info.co.jp/

を自動テスト中に取得する事が出来ます。このURLにアクセスするようなテストを書けば、
「自動テスト中にAPIを叩いて、そのレスポンス内のURLをテストに利用する」という事が可能になるわけです。

最初に記述した他の「直近出来るようになった事」もいつか記事にしたいと思います。

今後も技術確認に邁進してまいりましょう。今回はこれにて。

こちらの記事もどうぞ

上部へスクロール