メインコンテンツへスキップ

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

Eva Ferreira
  • 更新

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

レンダリングに <select>を使用していないドロップダウン

レンダリングにHTMLの <select>要素を使用していないドロップダウンを操作するステップをトレーニングするには、「要素を正しく見つける」のドキュメントを参照してください。

mabl sandboxには、HTMLの <select>ドロップダウンの複数のサンプルと、HTMLの <select>を使用せずにレンダリングする [React select] が用意されています。mabl Trainerにおけるドロップダウンの操作の方法を理解するには、https://sandbox.mabl.com/dropdownsでトレーニングを行うことができます。

選択ステップの編集方法

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

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

  • Value: ページのHTMLを検査する際にvalue属性を検索できます。例: <option value="cornishrex" />

  • Text: 目的のオプションのテキスト値です。例: <option>Cornish Rex</option>

  • Position: オプションの順番です。たとえば、5はドロップダウン内の5番目のオプションを示します。

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

  1. Trainerウィンドウで、鉛筆アイコンをクリックして選択ステップを編集します。

  2. [Edit select] メニューで、[Select the <option> where attribute] を選択します。

  3. value、text、positionのいずれかの属性を選択します。

  4. 選択した属性の値、テキストまたは位置を入力します。

    1. 文字列の場合は、固定値または `{{@var}}day` のような組み合わせとして属性を入力します。

    2. 変数の場合は、使用する変数を選択します。

  5. [OK] をクリックして変更内容を確定します。

ステップが期待どおりに動作することを確認するには、…(More actions) > [Play step] をクリックします。

edit_select.gif

選択ステップの編集

複数のドロップダウンがあるページのテスト

複数のドロップダウンが含まれるページをテストする場合、[Configure Find]を使用して、テストステップに正しいドロップダウンを操作させることができます。

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

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

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

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

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

  1. Trainerウィンドウでチェックマークをクリックして、新しいアサーションを作成します。

  2. アプリケーションで <select>要素をクリックします。

  3. `innerText` プロパティをアサートします。

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

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

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

  1. ドロップダウンオプションの数を "dropdown_length" という変数に保存します。

  2. 変数 "dropdown_length" の値を使用して反復するループを作成します。

  3. 位置に基づいて値を選択するステップを作成します。ループインデックスrun.loop_indexを使用して、ドロップダウンの位置を選択します。

  4. [SUBMIT] ボタンが有効になることをアサートします。

select_loop.png

ドロップダウン内の各オプションを確認するループ

関連記事