HTML selectドロップダウンの操作

Webアプリでは、ユーザーに選択肢のリストを提示するためにドロップダウンがよく使用されます。ドロップダウンをレンダリングする方法は多数ありますが、HTMLの select 要素は、オプションメニューから項目を選択する標準的な方法です。この記事では、選択ステップを構成し、ドロップダウンが正しく機能しているかどうかを検証する方法を説明します。

選択ステップの編集方法

ユーザーが select ドロップダウンを操作する場合、mablトレーナーはその操作を自動的に選択ステップとして記録します。デフォルトでは、記録されたステップには、ユーザーが選択した option 要素のvalue属性が表示されます。

このステップは、以下の属性に基づいてオプションを選択するように編集できます。

• Value: ページのHTMLを検査する際にvalue属性を検索できます。例: option value="cornishrex"
• Text: 目的のオプションのテキスト値です。例: option Cornish Rex
• Position: オプションの順番です。たとえば、5はドロップダウン内の5番目のオプションを示します。

選択ステップを編集するには、次の手順を実行します。

1. Trainerウィンドウで、鉛筆アイコンをクリックして選択ステップを編集します。
2. [Edit select] メニューで、[Select the option where attribute] を選択します。
3. value、text、positionのいずれかの属性を選択します。
4. 選択した属性の値、テキストまたは位置を入力します。
   • 文字列の場合は、固定値または `{{@var}}day` のような組み合わせとして属性を入力します。
   • 変数の場合は、使用する変数を選択します。
5. [OK] をクリックして変更内容を確定します。

ステップが期待どおりに動作することを確認するには、…(その他のアクション) > [ステップの実行] をクリックします。

選択ステップの編集

ドロップダウンオプションが期待どおりに機能することを検証する方法

ドロップダウンと検証する動作に応じて、次のいずれかのアプローチを試すことができます。

オプションが表示されていることのアサート

selectドロップダウンリスト内にすべてのオプションが存在することを確認するには、折りたたまれたドロップダウンのinnerTextプロパティをアサートします。innerTextプロパティには、すべての子要素のテキストが含まれます。selectドロップダウンの場合、このプロパティには各 option 要素のテキストが含まれます。

固定ドロップダウンに期待させるすべてのオプションが存在することを検証するには、次の手順を実行します。

1. Trainerウィンドウでチェックマークをクリックして、新しいアサーションを作成します。
2. アプリケーションで select要素をクリックします。
3. `innerText` プロパティをアサートします。

ドロップダウン内の各オプションが機能することの検証

ユーザーがどのドロップダウンオプションを選択してもテストが成功することを確認するには、ループを使用します。

次の例は、どのドロップダウンオプションが選択された場合でも、[SUBMIT] ボタンが有効になることを検証します。

1. ドロップダウンオプションの数を "dropdown_length" という変数に保存します。
2. 変数 "dropdown_length" の値を使用して反復するループを作成します。
3. 位置に基づいて値を選択するステップを作成します。ループインデックスrun.loop_indexを使用して、ドロップダウンの位置を選択します。
4. [SUBMIT] ボタンが有効になることをアサートします。