ネットワーク検証の追加

network validation ステップでは、ネットワークリクエストを検証できます。プリセットの検証ステップで、オブジェクトの配列 networkRequests（下表）を受け取り、この配列に対して JavaScript を実行します。

ネットワーク検証

networkRequests 配列に含まれるオブジェクトで、次の項目を検証できます：

Add network validation ステップを追加するには:

1. ステップを追加したい位置の （矢印記号） にカーソルを合わせます。

アクションのオプションが表示されます。

2. 「M」（Testim の事前定義ステップ）をクリックします。
   Predefined steps メニューが開きます。

3. Validations をクリックします。
   Validations メニューが展開されます。

4. メニューをスクロールして Add network validation を選択します。

Add Step ウィンドウが表示されます。

5. Name the new step フィールドに、このステップの（わかりやすい）名前を入力します。
6. このステップを共有ステップとして他のテストでも再利用できるようにする場合は、Shared step の隣のチェックボックスを選択したまま（デフォルト）にし、Select shared step folder リストからこのステップを保存するフォルダーを選択します。共有しない場合は、チェックボックスの選択を解除します。
   共有ステップの詳細については、Groups を参照してください。
7. Create Step をクリックします。
   function エディターが開き、右側に Properties パネルが表示されます。

8. Properties パネルの Description フィールドで、必要に応じてこのステップの説明を編集します。デフォルトの説明は「Run network validation」です。
9. ステップに必要なパラメーターを次の手順で定義します。\

まず Properties パネルで + PARAMS ボタンをクリックします。次に JS parameter を追加する場合はドロップダウンリストで JS を選択して JavaScript パラメーターを入力します。最後に HTML parameter として HTML 要素を定義する場合はドロップダウンリストで HTML を選択します。HTML を選ぶとブラウザが開き、ステップに関連するページが表示されるので、以降の操作で要素を選びます。

• AUT ウィンドウで、関連する要素にマウスを合わせてクリックし、選択します。選択した要素は Properties パネルの Target Element ボックスに表示されます。選択した要素の表示、置き換え、設定の調整を行う場合は、Editing Target Element Properties で説明されている手順を使用してください。

選択した要素には、自動的に「param」または「element」という名前が付けられます（JS パラメーターと HTML 要素のどちらを選択したかによって異なります）。パラメーター/要素に適切な名前を割り当てるには、edit アイコンをクリックして希望する名前を入力します。

10. 必要に応じて、次のプロパティを入力します:

• When this step fails – このステップが失敗した場合の動作を指定します。
• When to run step – ステップを実行する条件を指定します。詳細については、Conditions を参照してください。
• Override timeout – Testim がテストステップの失敗を登録するデフォルトの時間制限設定を上書きし、異なる時間制限値（ミリ秒）を指定できます。

11. function テキストボックスに、希望する JavaScript コードを入力します。パラメーターを定義している場合は、JavaScript コード内でそれらのパラメーターを参照できます。

12. 左上の戻る矢印でエディターに戻ります。

ステップが作成されます。

ネットワーク検証の例

すべての画像リクエストを検証する

Example Code:

function validateRequestStatuscode(req) {
  //Get status code
  const statusCode = req.statusCode.toString();
  //Check if we got an error
  const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
  //If we got an error fail the step
  if (badReq) {
    throw new Error(
      `assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`
    );
  }
}

console.table(networkRequests);
const imageCalls = networkRequests.filter((call) => call.type == 'Image');
imageCalls.forEach(validateRequestStatuscode);

単一のリクエストを検証する

Example Code:

if (networkRequests.length == 0) {
  throw new Error('No requests were made during the time of the test');
}

function validateRequestStatuscode(req) {
  //Get status code
  const statusCode = req.statusCode.toString();
  //Check if we got an error
  const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
  //If we got an error fail the step
  if (badReq) {
    throw new Error(
      `assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`
    );
  }
  return true;
}

//Filter the source of the request
function filterReqestsBySource(source, req) {
  const reqSource = req.source;
  if (source === reqSource) return true;
  return false;
}

//find a single request by it's url and check if they are all valid

const singleReq = networkRequests.find((item) => item.url == 'http://demo.testim.io/bundle.css');

if (!singleReq) {
  throw new Error('Request was not found');
}

return validateRequestStatuscode(singleReq);

すべてのリクエストが成功したことを検証する

Example Code:

function validateRequestStatuscode(req) {
  //Get status code
  const statusCode = req.statusCode.toString();
  //Check if we got an error
  const badReq = statusCode.startsWith('4') || statusCode.startsWith('5');
  //If we got an error fail the step
  if (badReq) {
    throw new Error(
      `assert failed for request "${req.url}" method: "${req.method}". Statusc code was ${req.statusCode}`
    );
  }
}

//Check all the requests and see if they are all valid
networkRequests.forEach(validateRequestStatuscode);
return true;

呼び出しの最大時間を検証する

コード例:

const callDur = networkRequests.map((call) => call.endTime - call.startTime);

const isOverMax = callDur.some((time) => time > maxTimeInMS);

if (isOverMax) throw new Error(`Some calls were over ${maxTimeInMS}MS`);

パラメーター例:

リクエストボディとレスポンスボディのキャプチャ

ネットワーク検証の一部として、上記で説明したリクエスト/レスポンスでキャプチャされるオブジェクトの配列に加えて、リクエストボディおよび/またはレスポンスボディをキャプチャし、add network validation ステップを使用してボディコンテンツの検証を実行することもできます。ボディコンテンツ自体はネットワークログには表示されませんが、networkRequests 配列に追加されます。

リクエストボディとレスポンスボディのキャプチャを有効にするには:

1. Setup Step で Show Properties をクリックします。
2. Network Capture Options の下で、Capture request body および/または Capture response body オプションを選択します。

3. Save をクリックしてテストを保存します。

add network validation ステップへのリクエスト/レスポンスボディの追加

Network Capture Options（リクエスト/レスポンスボディのキャプチャ）を有効にした後、

Add network validation ステップでは、パラメーター networkRequests が利用可能になり、実行されたすべての

リクエストが保持されます。各リクエストオブジェクトには、method、statusCode、resposeHeaders、requestBody（新しいプロパティ）、responseBody（新しいプロパティ）、headers などのプロパティがあります。Add network validation ステップを追加する際、以下に示すように requestBody および/または responseBody プロパティを追加できます。

テスト例

次のテスト例では、ネットワーク検証ステップでリクエスト/レスポンスボディを使用しています:

https://app.testim.io/#/project/GYXR2qZC/branch/master/test/8PsdGWbxJx7NsZji

ボディペイロードをコンソールに出力します。