JavaScriptスニペットの例

他の変数の使用

テストの以前のステップで定義した変数にアクセスする例を示します。この例は、パス ("user/profile/settings") を格納した変数を使用し、現在のドキュメントのURLを使用して新しいURLを作成し、callbackでこの値を返して変数として保存します。

function mablJavaScriptStep(mablInputs, callback) {
  
  // pull a previously defined variable out of the built-in mablInputs
  // object to use in the javascript code
  let path = mablInputs.variables.user.myTestPath;
  
  // get the current URL of the document
  let currentURL = document.URL;
  
  // create a new URL combining both javascript variables
  let finalURL = `${currentURL}/${path}`;
  
  // perform the callback with the finalURL value to be saved as a variable
  callback(finalURL);
}

現在の日時を示す変数の作成

JavaScriptエディターを使用して、現在の日時を示す変数を作成できます。変数作成フォーム内のコードエディターとDateオブジェクトを使用します。時間フォーマットを作成する他の方法については、Dateオブジェクトに関するドキュメントを参照してください。

function mablJavaScriptStep(mablInputs, callback) {
  // create a new Date object
  let today = new Date();
  // get the string representation of the date and time
  let finalDateTime = today.toLocaleString();
  // perform the callback with the result
  callback(finalDateTime);
}

URLが目的のパスであることを調べるアサーション

テストが正しいパスで終了したことを確認する場合、カスタムのJavaScriptステップを使用してパスを確認します。パスが一致しない場合、JavaScriptステップは失敗し、テストも失敗します。

function mablJavaScriptStep(mablInputs, callback) {
  if (document.location.pathname === '/pricing') {
    callback('pricing path confirmed on page');
  } else {
    throw Error("incorrect path found on page: " + document.location.pathname);
  }
}

2xxレスポンスコードの有効性の確認

一般に、デフォルトの「ホームページ訪問」テスト以外では、2xxレスポンスコードを検証することはできません。しかしJavaScriptエディターを使用すれば、レスポンスコードを検証し、テストの出力ログでコードを返すことができます。次の例は、ターゲットURL (https://uinames.com/api/?ext) の2xxレスポンスコードの検証を示したものです。

📘

2XXレスポンスの検証とAPIリクエストのためのmabl APIステップ

2xxレスポンスコードの検証やAPI呼び出しを行う場合、以下のJavaScriptを使用できます。

Enterpriseプランまたはトライアルのお客様は、mabl APIステップを作成し、使用することができます。

function mablJavaScriptStep(mablInputs, callback) {
  // set the URL you want to test as the variable
  let url = 'https://uinames.com/api/?ext';
  // check for the status code while passing credentials to the target website
  fetch(url, {
   method: 'GET',
   credentials: 'include'
 }).then(apiResponse => {
    console.log(apiResponse);
    if (apiResponse.ok) {
      return callback(apiResponse.status);
    } else {
      throw Error(`Unexpected response code of ${apiResponse.status} when retrieving ${url}`);
    }
  });
}

非同期APIリクエスト

次の例では、JavaScriptステップ内でfetch APIを使用して非同期APIリクエストを行う方法を示します。uinames.com APIに架空のユーザーデータを求めるクエリを実行し、クレジットカード番号を取得します。

function mablJavaScriptStep(mablInputs, callback) {
  
  // define a javascript variable for the uinames.com API endpoint
  let url = 'https://uinames.com/api/?ext';
  
  // perform an asynchronous fetch against the API endpoint that returns JSON responses 
  fetch(url).then(apiResponse => {
    // extract the json value from the response
    return apiResponse.json();
  }).then(jsonResponse => {
    // extract the credit card number and perform callback
    callback(jsonResponse.credit_card.number);  // sample output: "2589-7385-9065-7232"
  });
}

Did this page help you?