Interacting with HTML select dropdowns

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.

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.

Editing a select step

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.