Skip to main content

​
Introduction

A dropdown element allows a user to select one or more options from a limited set of choices. 
<select style="width:100px" name="pets" id="pets">
     <option value="cat">Cat</option>
     <option value="dog">Dog</option>
     <option value="rabbit">Rabbit</option>
</select>
The best way to interact with that <select> element is with the Select Option action. In the Select Option step, you have to provide the locator for the <select> element and the option you want to choose. In the Option to pick input, you need to provide the text from the <option> element, or the value, or the index. For example, if we want to select the Rabbit option from our dropdown:
StrategyValue
TextRabbit
Valuerabbit
Index2
Here is what the step would look like if we use the value:
endtest dropdown select
 You can also pick an option by using 2 Click steps. The first Click step will open the dropdown. And the second Click step will pick the option.
endtest dropdown select click

​
2. Modern Dropdowns

Since <select> elements have limited styling options, you’ll encounter modern dropdowns in some web applications. One good example is the Browser dropdown from our Web Tests section:
endtest dropdown modern
 A modern dropdown is usually built with <div> elements. Sometimes, those <div> elements might be generated on top of <select> elements that are no longer interactable. The Select Option action is built to work only with classic dropdowns (<select> elements). For modern dropdowns, you will need to use 2 Click steps, one to open the dropdown, and one to pick the option.
endtest dropdown modern click
Technically, you could also use an Execute JavaScript step to select an option from a dropdown. But that option is only recommended as a last resort, since it does not mimic a real user.