Webアプリでは、ユーザーに選択肢のリストを提示するためにドロップダウンがよく使用されます。ドロップダウンをレンダリングする方法は多数ありますが、HTML select要素は、オプションのメニューから選択するための標準的な選択肢です。この記事では、selectステップの設定方法と、ドロップダウンが期待どおりに機能していることを検証する方法について説明します。
select を使用してレンダリングされないドロップダウン
HTML select 要素を使用してレンダリングされていないドロップダウンと対話するステップのトレーニングに関するアドバイスについては、正しい要素の検索に関するドキュメントを参照してください。
Trainerがさまざまなタイプのドロップダウンとどのように連携するかを理解したい場合は、このページをテストしてください: https://sandbox.mabl.com/dropdowns。このページには、HTML selectドロップダウンの例と、divおよびspan要素とCSSスタイリングを使用してレンダリングされるカスタムドロップダウンの例が含まれています。
選択ステップの編集方法
selectドロップダウンを操作すると、mablトレーナーは自動的にあなたのアクションをselectステップとして記録します。デフォルトでは、記録されたステップには
このステップは、以下の属性に基づいてオプションを選択するように編集できます。
-
Value: ページのHTMLを検査する際にvalue属性を検索できます。例:
option value="cornishrex" -
Text: 目的のオプションのテキスト値です。例:
option Cornish Rex - Position: オプションの順番です。たとえば、5はドロップダウン内の5番目のオプションを示します。
選択ステップを編集するには、次の手順を実行します。
- Trainerウィンドウで、鉛筆アイコンをクリックして選択ステップを編集します。
- 選択を編集メニューで、「
- value、text、positionのいずれかの属性を選択します。
- 選択したい値、テキスト、または位置を入力してください:
- 文字列の場合は、固定値または `{{@var}}day` のような組み合わせとして属性を入力します。
- 変数の場合は、使用する変数を選択します。
- [OK] をクリックして変更内容を確定します。
ステップが期待どおりに動作することを確認するには、…(その他のアクション) > [ステップの実行] をクリックします。
選択ステップの編集
複数のドロップダウンがあるページのテスト
複数のドロップダウンが含まれるページをテストする場合、[Configure Find]を使用して、テストステップに正しいドロップダウンを操作させることができます。
ドロップダウンオプションが期待どおりに機能することを検証する方法
ドロップダウンと検証する動作に応じて、次のいずれかのアプローチを試すことができます。
オプションが表示されていることのアサート
selectドロップダウンのすべてのオプションが存在することをアサートしたい場合は、折りたたまれたドロップダウンのinnerTextプロパティに対してアサートできます。innerTextプロパティには、すべての子要素のテキストが含まれており、selectドロップダウンの場合、これには各option要素のテキストが含まれます。
固定ドロップダウンに期待させるすべてのオプションが存在することを検証するには、次の手順を実行します。
- 新しい要素アサーションを追加します:✔︎ (Assert) > Element。
- アプリケーション内の
select要素をクリックします。 - HTML タブを選択します。
-
innerTextプロパティをアサートします。
ドロップダウン内の各オプションが機能することの検証
ユーザーがどのドロップダウンオプションを選択してもテストが成功することを確認するには、ループを使用します。
次の例では、どのドロップダウンオプションが選択されていても、「SUBMIT」ボタンが有効になっていることを検証します:
- 「dropdown_length」という変数にドロップダウンオプションの数を保存します。
- 変数「dropdown_length」の値を使用して反復処理を行うループを作成します。
- 位置に基づいて値を選択するステップを作成します。ループインデックス
run.loop_indexを使用して、ドロップダウンの位置を選択します。 - 「SUBMIT」ボタンが有効になっていることをアサーションします。
ドロップダウン内の各オプションを確認するループ