アプリケーションのテストを作成していると、テストデータの形式に問題があることに気付くことがあります。たとえば、ユーザーのフルネームはわかっているものの、ユーザーの姓と名を別々の入力ボックスに入力しなければならない場合があります。あるいは、表の計算出力が正しいことを検証したいのに、ページ上の値に数字以外の文字が含まれることがあります。
このようなよくあるテスト上の課題に対処するには、JavaScriptを使用します。この記事では、JavaScriptスニペットでのデータの操作方法について説明します。サンプルシナリオの例を使って各ステップを説明していきます。
このワークフローのアクションは、次のような、データの操作が必要な他のテストシナリオにも適用できます。
- 価格表示に対する通貨記号やカンマの削除または追加
- 異なる国での数値の書式設定
- 日付の生成および書式設定
- 文字列内のテキストの置き換えまたは削除 (IDの抽出など)
- JSONレスポンスボディからの値の抽出
サンプルスニペット
このテストで使用可能なJavaScriptの例については、mabl JavaScriptスニペットのGitHubリポジトリをご確認ください。
ステップ1: Rawデータの変数への格納
Rawデータを取得して変数に格納します。このデータの取得に使用する方法は、データソースによって異なります。Rawデータがページ上にある場合は、エレメントプロパティから新しい変数を作成します。Rawデータをバックエンドから取得する場合は、APIステップまたはデータベースクエリステップを使ってデータを取得し、変数に格納します。
このサンプルシナリオの場合、Eコマースアプリケーションのページの上部に表示されるアイテム数がページ上の実際のアイテム数と一致していることを検証することが目標です。たとえば、ページの上部に「(16 items)」と表示されている場合、ページ上に16個のアイテムが存在していなければなりません。
Rawデータは「(16 items)」というテキストで、これを変数に格納するステップは次のとおりです。
- [{x}] > [Create variable] をクリックします。
- 変数のソースを [Element property] に設定します。
- 変数名 (
raw_value
など) を指定します。 - [OK] をクリックします。
テキスト「(16 items)」の変数への格納
ステップ2: スニペットを使用したデータの操作
後続のステップで使用できるようにデータの形式を変更します。これを行うには、JavaScriptを使って変数を作成します。Rawデータをパラメーターとして渡し、目的の形式でデータを出力する新しいスニペットを記述します。スニペットを実行して正しく動作することを確認し、変数に名前を付けます。
JavaScriptを使用した変数の作成
このサンプルシナリオでは、「(16 items)」から「16」を抜き出し、これを変数に格納します。
- [{x}] > [Create variable] をクリックします。
- 変数のソースを [JavaScript] に設定します。
- [New] をクリックして新しいスニペットを作成します。
- パラメーターを追加し、mabl変数構文を使用して、最初のステップで作成した変数をデフォルト値に設定します。この例では、パラメーターは
item_count
で、デフォルト値は{{@raw_value}}
です。 - 目的の形式でデータを出力するコードを記述します。
- スニペットを保存します。
- 変数に
items
という名前を付けます。 - [OK] をクリックします。
以下は、mabl-javascript-snippets GitHubリポジトリのextractNumbersFromString.jsスニペットを使用する例です。
function mablJavaScriptStep(mablInputs, callback, item_count = '{{@raw_value}}') {
const result = extractNumbersFromString(item_count);
callback(result[0]);
}
/** Function from mabl-javascript-snippets GitHub Repo **
*
* Extracts all numbers found in the provided value
* @param {String} value - The string you want to extract numbers from
* @returns {Array<Number>} - Returns an array of all numbers found in "value"
*/
function extractNumbersFromString(value) {
let matches = value.match(/\d+\.*\d*/g);
return matches.map(Number);
}
ステップ3: 操作済みデータの後続のステップでの使用
操作済みデータを新しい変数に格納したら、この変数を後続のテストステップで使用して、テスト目標を達成します。アサーション、入力値、検索の設定、またはmabl Trainerで変数を使用するその他の用途で、この変数を使用します。
このサンプルシナリオでは、ステップ2で作成した変数items
の値がページ上のアイテム数と一致していることを検証します。これを行うステップには、カスタム検索アサーションが必要です。
- プラス記号 (+) をクリックして、新しいステップを追加します。
- [Find elements] を選択します。
- [Find type] を「Number of elements」に設定します。
- ページ上の販売対象のアイテム数をカウントするCSSクエリを記述します。
- [Action] を「Make assertion」に設定します。
CSSを使用してページ上の販売対象のアイテム数を見つける
- 次のページで、販売対象のアイテム数をステップ2で作成した
items
変数と比較するようにアサーションを設定します。 - [OK] をクリックして、アサーションを保存します。
販売対象の合計アイテム数と変数items
との比較
詳細情報
このワークフローで取り上げたトピックの詳細については、次の記事を参照してください。