スニペットの操作

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

📘

APIスクリプト

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

スニペットの作成

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

• mablトレーナー内
• [スニペット] ページ上

mablトレーナー内

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

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

📘

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

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

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

[スニペット] ページ

mablトレーナーでスニペットを作成する以外に、デスクトップアプリケーションの [スニペット] ページでもスニペットを作成できます。

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

📘

注

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

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

スニペットのインポート

トレーナーでの既存のスニペットの使用

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

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

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

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

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

スニペットの使用

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

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

JSステップの作成

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

JavaScriptによる変数の定義

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

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

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

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

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

📘

真値と偽値

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

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

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

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