Testing dropdowns

Web apps frequently make use of forms to collect user data for various purposes such as insurance applications and online class registrations. Those forms can be quite complex and typically include dropdown selectors with conditional logic that is challenging to test. However, mabl makes it easy to test such HTML <select /> elements by giving you control over target element locators as well as selecting options based on value, text, or position attribute. Moreover, you can use variables to do data-driven testing of multiple scenarios with the same test.


Selecting a dropdown option based on a matching variable for its value attribute.

How it works

Using the mabl Trainer, you can interact with dropdown and list selectors within your application just like a user would. Mabl will automatically detect those interactions and record them as "Select" steps that indicate the option you have selected.

You can edit those "Select" steps to tell mabl to use a different criteria to select the desired select option based on the following attributes:

  • value - the value attribute of the option which can be found when you inspect the page HTML (e.g. <option value="Monday" />).
  • text - the text value of the desired option (e.g. <option>Monday</option>).
  • position - the ordinal position of the option within the list (e.g. 5th element).

Once you have chosen which attribute you want to use to select an option, you need to specify a value that mabl will look for to select an option within the selector. This value can be specified as a static string, a variable, or a combination of two can be entered within the string field such as {{@prefix}}day.

Data-driven testing of multiple scenarios

Here's how you can validate that all options of a dropdown work as expected using variables and DataTables for managing test data outside of the test. This approached is typically referred to as data-driven testing and helps you to quickly validate multiple scenarios with the same test, which helps you quickly increase test coverage and significantly reduce future test maintenance. The same approach can be applied when you need to test multiple selectors with different combinations.

First, you need to create one or more data-driven variables that will be used to select an option from a dropdown. You can do so by clicking on Variables > Manage. At this point you should decide which attribute you will use to select a given option by - value, text, or position - and specify a respective default value for the variable. Next, you should edit already recorded "Select" steps to specify that you want to mabl to use a variable to select an option. You can proceed with creating your end-to-end test.

Once you have created your test, you can generate a DataTable for it using all data-driven variables that you see on the test details page.


A test using one data-driven variable to validate seven scenarios defined in an associated DataTable.

In the datable, you should specify your scenario names and assign values to variables for each scenario.


A DataTable with seven scenarios and two variables.

You can then do an ad-hoc test run using the DataTable. You should see a test run for each DataTable scenario that uses different variable values as specified in the DataTable. If the test is added to a mabl plan, a plan run will automatically kick off multiple runs for the test, one for each data-driven scenario.