Skip to main content

Interacting with HTML select dropdowns

Eva Ferreira
  • Updated

Web apps often use dropdowns to present a list of options to users. While there are many ways to render dropdowns, the HTML <select> element is the standard choice for picking from a menu of options. This article explains how to configure select steps and validate your dropdowns are working as expected.

Dropdowns not rendered using <select>

For advice on training steps that interact with dropdowns that are not rendered using an HTML <select> element, see our documentation on finding the correct element.

The mabl sandbox includes examples of HTML <select> dropdowns and a "React select," which is not rendered using HTML <select>. If you want to understand how interacting with dropdowns works in the mabl Trainer, you can train against this page: https://sandbox.mabl.com/dropdowns.

How to edit select steps

When you interact with a <select> dropdown, the mabl Trainer automatically records your actions as a select step. By default, the recorded step shows the value attribute of the <option> element that you chose.

You can edit this step to select an option based on the following attributes:

  • Value: you can find value attributes when you inspect the page HTML. For example: <option value="cornishrex" />
  • Text: the text value of the desired option. For example: <option>Cornish Rex</option>
  • Position: the ordinal position of the option. For example, 5 would be the 5th option in the dropdown.

To edit a select step, take the following steps:

  1. Click on the pencil icon to edit the select step in the Trainer window.
  2. In the Edit select menu, choose "Select the <option> where attribute"
  3. Select one of the following attributes: value, text, or position.
  4. Enter the value, text, or position that you want to choose:
    • For String, enter the attribute as a static value or a combination, such as {{@var}}day.
    • For Variable, choose the variable you want to use.
  5. Click OK to confirm your changes.

To confirm the step works as expected, click on … (More actions) > Play step.

edit_select.gif

Editing a select step

Testing on a page with multiple dropdowns

If you are testing a page that contains multiple dropdowns, you can use Configure Find to ensure your test steps interact with the correct dropdown.

How to validate dropdown options work as expected

Depending on the dropdown and the behavior you want to validate, you may try one of the following approaches.

Assert options are present

If you want to assert that all options in a <select> dropdown exist, you can assert on the innerText property of the collapsed dropdown. The innerText property contains the text of all the child elements, and for a <select> dropdown, this includes the text for each <option> element.

To validate that a fixed dropdown contains all of its expected options, take the following steps:

  1. Click on the check mark in the Trainer window to create a new assertion.
  2. Click on the <select> element in the application.
  3. Assert on the innerText property.

Validate each option in a dropdown works

If you want to make sure your test passes no matter which dropdown option you select, you can use a loop.

The following example validates that the "SUBMIT" button is enabled no matter what dropdown option is selected:

  1. Store the number of dropdown options in a variable called "dropdown_length."
  2. Create a loop that iterates using the value of the variable "dropdown_length."
  3. Create a select step that selects a value based on position. Use the loop index - run.loop_index - to select the dropdown position.
  4. Assert that the "SUBMIT" button is enabled.

select_loop.png

A loop checking each option in a dropdown

Related articles