Handling Dropdown Menus with Selenium WebDriverIO

When performing automated browser testing with Selenium, handling dropdown menus is essential because they are commonly used in forms to save space and prevent user errors. Selenium WebDriverIO provides a Select class that simplifies interaction with these elements.

Different Types of Dropdown Menus

Web pages typically contain two main kinds of dropdowns: normal (standard) dropdowns and custom dropdowns.

Normal dropdown menu

Custom dropdown menu

Normal Dropdown

A normal dropdown is created with the standard <select> HTML tag, usually identified by an id="dropdown" attribute. Example markup:

<select id="dropdown">
    <option value="" disabled selected>Please select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

Custom Dropdown

Because the styling options for <select> are limited, developers often build custom dropdowns using <div> elements or framework‑specific components. Example markup:

<div class="fsw_inputBox travelFor inactiveWidget">
   <label data-cy="travellingFor" for="travelFor">
      <span class="lbl_input latoBold appendBottom10">Travelling For</span>
      <input data-cy="travelFor" id="travelFor" type="text" class="hsw_inputField font20" readonly value="">
      <div class="code latoBold font14 blackText makeRelative">
         <p></p>
         <p class="font14 greyText">Select a Reason (optional)</p>
      </div>
   </label>
</div>

In Selenium automation, custom dropdowns must be handled according to the events defined by the developer, while normal dropdowns are managed by the Select class.

Handling Dropdown Menus

WebDriverIO makes interacting with dropdowns straightforward; you can locate a dropdown using a simple selector such as an ID.

Example: const drp = $("#dropdown"); Dropdowns can be single‑value or multi‑value (when the multiple="true" attribute is present). WebDriverIO provides three main methods:

selectByIndex()

selectByVisibleText()

selectByAttribute()

selectByIndex

Selects an option based on its zero‑based position in the list. Syntax: $("selector").selectByIndex(index); To choose the first option: $("#dropdown").selectByIndex(0); Avoid using this method when the order of options changes frequently.

selectByVisibleText

Selects an option by the text displayed to the user. Syntax: $("selector").selectByVisibleText(text); Example – selecting "Option 2": $("#dropdown").selectByVisibleText("Option 2"); Ensure the visible text remains unchanged; otherwise the element cannot be identified.

selectByAttribute

Allows selection based on any attribute present in the <option> tag, not just value. Syntax:

$("selector").selectByAttribute(attribute, value);

Example – selecting the option with value="1": $("#dropdown").selectByAttribute("value", "1"); If the HTML dropdown includes additional attributes, they can also be used for selection.

Multi‑Value Dropdowns

When a <select> element has the multiple="true" attribute, multiple options can be chosen. Automating such a dropdown requires invoking the selection methods multiple times, or implementing a custom JavaScript routine.

The article concludes with references to additional resources and a list of related articles.