スニペットの操作

ブラウザーテストでのスニペットの作成方法と使用方法

このガイドでは、ブラウザーテストでスニペットを作成、インポート、使用するさまざまな方法について概要を示します。

📘

APIスクリプト

JavaScriptスニペットはブラウザーテストでのみ使用します。APIテストでのJavaScriptの使用については、こちらをクリックしてください。

スニペットの作成

スニペットは、アプリケーションの次の2つの領域で作成できます。

  • mabl Trainer内
  • [Snippets] ページ上

mabl Trainer内

TrainerでJavaScriptスニペットの新しいステップを作成するには、次の手順を実行します。

  1. +アイコンをクリックして、ステップを追加します。
  2. [JavaScript] を選択します。Trainerウィンドウに [Configure snippet] メニューが表示されます。
  3. [New] ボタンをクリックします。
  4. スニペットエディターでスニペットを記述します。期待どおりに動作することを確認するために、スニペットを実行することをお勧めします。
  5. [Save] をクリックします。スニペットをワンタイムスニペットと再利用可能なスニペットのどちらで保存するかをオプションで選択します。
  6. [OK] をクリックします。スニペットがテストステップとして追加され、Trainerで実行されます。

📘

ワンタイムスニペットと再利用可能なスニペットの相違

ワンタイムスニペットはテストで1回だけ使用され、他のテストにはインポートできません。再利用可能なスニペットはテストで複数回使用でき、他のテストにインポートできます。

変数ステップと条件付きステップのためにも新しいスニペットを作成できます。

[Snippets] ページ

11371137

mabl Trainerでスニペットを作成する以外に、Trainer外部の [Snippets] ページでもスニペットを作成できます。

  1. 左側のナビゲーションメニューで [Tests] をクリックします。
  2. [SNIPPETS] タブを選択します。
  3. [+ New snippet] ボタンをクリックします。
  4. スニペットエディターでスニペットを記述します
  5. [Save] をクリックします。

📘

[Snippets] ページでスニペットを作成または編集するときには、次の点に留意してください。

  • スニペットをmabl Trainerの外部で実行することはできません (このモードのスニペットエディターには [Run] ボタンがありません)。
  • [Snippets] ページで作成したスニペットは、常に再利用可能なスニペットとして保存されます。

スニペットのインポート

Trainerでの既存のスニペットの使用

テストに既存のスニペットをインポートするには、次の手順を実行します。

  1. +アイコンをクリックして、ステップを追加します。
  2. [JavaScript] を選択します。Trainerウィンドウに [Configure snippet] メニューが表示されます。
  3. スニペットのドロップダウンをクリックし、使用するスニペットを選択します。
  4. パラメーターがある場合は、必要に応じて更新します。
  5. スニペットが期待どおりに動作することを確認する場合は、[Run] をクリックします。
  6. [OK] をクリックします。スニペットがテストに追加され、Trainerで実行されます。

既存のスニペットからのスニペットの新規作成

スニペットを変更し、オリジナルを残す場合、次の手順を実行します。

  1. +アイコンをクリックして、ステップを追加します。
  2. [JavaScript] を選択します。Trainerウィンドウに [Configure snippet] メニューが表示されます。
  3. スニペットのドロップダウンをクリックし、変更するスニペットを選択します。
  4. スニペットエディターでスニペットを更新します。
  5. [Save] ボタンの横にある下矢印をクリックし、[Save as new reusable snippet] を選択します。既存のスニペットから新しいスニペットが作成されます。
802802

スニペットの使用

ブラウザーテストでは、スニペットを次の3つの方法で使用できます。

  • スタンドアロンステップ (別名JSステップ) として使用
  • 変数値を定義するために使用
  • 条件 (IFステップ、ELSE IFステップ) を評価するために使用

JSステップの作成

  1. +アイコンをクリックして、ステップを追加します。
  2. [JavaScript] を選択します。Trainerウィンドウに [Configure snippet] メニューが表示されます。
  3. 新しいスニペットを作成するか、既存のスニペットを使用します。
  4. [OK] をクリックします。スニペットがテストステップとして追加され、Trainerで実行されます。

JavaScriptによる変数の定義

次の手順を実行すると、JSスニペットの出力から変数を作成できます。

  1. Trainerウィンドウの下にある {x} アイコンをクリックします。
  2. [Create a new variable] をクリックします。
  3. ソースとして [JavaScript] を選択します。
  4. 新しいスニペットを作成するか、既存のスニペットを使用できます。
  5. スニペットが期待どおりに動作することを確認する場合は、[Run] をクリックします
  6. 変数に名前を付けます。
  7. [OK] をクリックします。Trainerウィンドウに新しい変数ステップが表示されます。
336336

条件付きステップのためのJavaScriptの使用

条件のコンテキストでスニペットを使用すると、スニペットの結果の真偽が評価され、条件を満たすかどうかが判定されます。

  • スニペットの結果が真値 (truthy) の場合、条件ブロック内のステップが実行されます。
  • スニペットの結果が偽値 (falsy) の場合、条件ブロック内のステップは省略されます。

📘

真値と偽値

詳細については、MDN用語集の真値偽値を参照してください。

条件付きステップにJavaScriptを使用するには、次の手順を実行します。

  1. +アイコンをクリックして、ステップを追加します。
  2. [Conditionals] をクリックします。
  3. 追加対象の条件ステートメントを選択します。
  4. [JavaScript] を選択します。
  5. 新しいスニペットを作成するか、既存のスニペットを使用します。
  6. スニペットが期待どおりに動作することを確認する場合は、[Run] をクリックします。
  7. [OK] をクリックします。Trainerウィンドウに新しい条件付きステップが表示されます。

このステップを記録した後、JavaScriptステップの条件がtrueと評価された場合に実行するステップを追加します。