Selecting dropdown options

Many forms use dropdowns to let users choose from a list of options.

In UI-licious, you can use I.select() to choose an option from a standard HTML <select> dropdown.

Selecting an option using I.select()

I.select accepts two arguments:

• list : the <select> dropdown list that contains the option
• option : the <option> to select

To select an option from a dropdown, provide the dropdown list and the option to select:

Country


	Select Country
	Singapore
	United States

Demo: Select Dropdown

UI

Country
Select Country Singapore United States

HTML

<!--[--><label for="country-field"><b>Country</b></label><br>
<select id="country-field" name="country">
  <option value="" selected="">Select Country</option>
  <option value="SG">Singapore</option>
  <option value="US">United States</option>
</select>
<!--]-->

I.select("Country", "Singapore")

This selects the option "Singapore" from the "Country" dropdown list.

You can also use CSS or XPath to specify the dropdown list and option to target.

I.select("#country-field", "//option[@value='SG']")

TIP

We strongly recommend using visible labels instead of CSS or XPath selectors. Tests written this way remain more readable and resilient to UI changes.

If the option is unique across the page, specifying the list is optional:

I.select("Singapore")

How UI-licious identifies dropdown lists and options

To identify the best matching <select> dropdown, UI-licious evaluates the following:

1. associated <label> element
2. descriptive attributes such as aria-label or title
3. the name attribute
4. surrounding text
5. text of the currently selected <option> — to support patterns where the default option is used as the label, e.g. "Select Country"

To identify the correct option to select, UI-licious evaluates the following:

• the option's visible label
• the option's value attribute

Custom dropdown components

I.select only works for standard HTML <select> elements.

Some applications use custom UI components simulate dropdowns. In such cases, use I.click instead to interact with the UI in the way a user would:

// click on "Country" to toggle the dropdown menu
I.click("Country")

// type to search
I.type("Sin")

// click on the "Singapore" option to select
I.click("Singapore")

Verifying selection

You can assert that an option is selected using the I.selected command:

// fails if "Singapore" is not selected
I.selected("Country", "Singapore")