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