mablは、トレーニングしたテストの中でユーザー提供のJavaScriptスニペットを実行できます。その結果を変数として、保存するオプションもあります。同期と非同期のどちらのJavaScriptコードもサポートされています。公開されているJavaScriptリポジトリには、ユーザーが作成した多くのスニペットがあります。

汎用的なJavaScriptステップ

Trainerに汎用的なJavaScriptステップを挿入するには、[More actions] メニューをクリックし、[Insert JavaScript] をクリックしてコードエディターを開きます。

画面上にコードエディターのウィンドウが開きます。

ユーザー提供のJavaScriptを実行する手段として、mablJavaScriptStepという事前定義された関数が用意されています。この関数には、次の2つの引数があります。

• mablInputs:
  • mabl提供のオブジェクト。トレーニングセッションですでに定義されている読み取り専用変数を格納します。

mablInputs = {
  variables: {
    user: {
      // variables created during the trained test thus far
      myCreatedVariable: "Variable value created earlier"
    }
  }
}

• callback:

  • mabl提供のコールバック関数。JSスニペットの完了を示すために、最後にこの関数を呼び出す必要があります。実行が必要な非同期コードを入力した後には、必ずこの関数を呼び出してください。callback待ちの状態で30秒が経過すると、テストの実行は失敗します。callbackでは、値を返す必要があります。

  • callbackでサポートされている戻り値の型は、以下のとおりです。

    • boolean
    • string
    • number

  • 他の型を指定すると、JSステップが失敗するか、無視されます。

エディターにJavaScriptコードを入力します。準備が完了したら、[Run] ボタンを押します。現在のページのコンソールで、入力したJavaScriptが実行されます。必要な結果が得られた場合は、[Save] ボタンを押します。

👍

チームメンバー間で共有

JavaScriptステップをスニペットとして保存すると、ワークスペースの誰もがそのステップを使用できるようになります。[Snippet Name] と [Snippet Description] にわかりやすい名前と説明を指定しておくと、チームの他のメンバーにステップの意味を伝えることができます。他のメンバーは、コードの内容を理解する必要はなく、ステップを簡単に再利用することができます。

JavaScriptステップを保存すると、Trainerにステップが表示されます。この後、テストの作成を続けることができます。

👍

時間短縮のヒント

• 複数のテストで同一のJavaScriptステップを使用する必要がある場合、必ずスニペットとして保存してください。後でJavaScriptの更新が必要になった場合、1か所で更新すれば、すべてのテストが更新されます。
• 再利用性の高いコードにすることをお勧めします。テストで設定済みの変数をJavaScriptステップで使用すると、コードの再利用性が高まります。たとえば、"date_to_pick" という変数の値に基づいて日付選択カレンダーから日付を選択するJavaScriptステップを作成すると仮定します。変数 "date_to_pick" を設定し、後でこのJavaScriptスニペットを実行すると、目的の日付を選択することができます。

保存したJavaScriptスニペットをテストに追加

まず、スニペットの追加先となるテストを新規作成するか、既存のテストを選択します。上のスクリーンショットに示すように、Trainerで [Javascript] アイコンをクリックします。

[Load snippet...] リンクを選択し、クリックします。既存のスニペットのリストが表示されます。追加するスニペットをクリックします。最後に、[Save] をクリックしてテストを保存します。

スニペットダッシュボードでのスニペットの追加、既存のスニペットの編集と管理

再利用可能なフローと同様に、保存済みのJavaScriptスニペットを [Tests] ページの [SNIPPETS] タブで確認することができます。

スニペットの新規作成

mablアプリケーションから直接JavaScriptスニペットを作成するには、[NEW SNIPPET] ボタンをクリックします。

表示されたモーダルで、スニペット名の指定、説明の入力、コードの追加を行います。コードを下のエディターに追加します。誤りがないことを確認し、コードを保存します。

🚧

重要情報: JavaScriptスニペット名の指定

スニペットの新規作成で既存のスニペット名を使用すると、以前同じ名前で作成したスニペットは自動的に上書きされます。名前が一意であることをダブルチェックしてください。

新しいJavaScriptスニペットが [SNIPPETS] タブに表示されます。これで、テストのどの部分にもこのスニペットを使用できます。

既存のスニペットの編集

[SNIPPETS] タブから直接スニペットを編集できます。スニペット名をクリックしてエディターを開くだけです。

編集後、編集画面の下部にある [Save] ボタンをクリックします。変更内容は、そのスニペットが使用されるすべてのテストに反映されます。

既存のスニペットの管理

削除できるスニペットは、テストで使用されていないスニペットのみです。スニペットのすべてのインスタンスが削除されて初めて、右側の赤い [DELETE] ボタンをクリックできるようになります。

📘

エラーとコンソールステートメントの表示

エラーとコンソールステートメントは、作業中のページのDevToolsコンソールから表示できます。

🚧

JavaScriptライブラリに関する重要情報

外部のJavaScriptライブラリは、mablテストのJavaScriptステップにはインポートできません。

JavaScriptによる変数の定義

JavaScriptスニペットを使用して、mabl Trainerで変数を定義できます。変数作成フォームに [JavaScript] オプションがあります。

ここで [Open code editor] ボタンをクリックすると、コードエディターが起動します。エディターの機能は、Trainerのメインツールバーの [Javascript] ボタンをクリックした場合とほぼ同じですが、[Save] または [Run] をクリックすると、出力は変数として保存されます。変数作成フォームを保存する前に出力を確認し、必要に応じてエディターを再度開いてJavaScriptを編集することができます。

例

📘

公開されているJavaScriptスニペットリポジトリ

公開リポジトリには、ユーザーが作成した多くの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レスポンスの検証とAPIリクエストのためのmabl APIステップ

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

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

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

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

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"
  });
}

🚧

非同期エラー

非同期callback関数の中でエラーをmablにスローしなければならない場合があります。

この場合、return callback(null, 'My Error Message');を使用して制御をmablに返すことができます。これは、throw Error('My Error Message');に相当します。