Handling Dropdowns in Selenium: With and Without Select Class

Dropdown menus are important element of many web applications, that provides users to select values from a list of options. So, to automate web applications, it is essential to know how to handle dropdown menus effectively. In this blog, we will explore ways to handle dropdowns using Select class, without Select class and dynamic dropdowns.

Handling Dropdowns using Select Class:

In HTML, dropdowns are commonly implemented using the Select tag. Therefore, in Selenium if you have the Select tag in the HTML, you can use the Select class provided by ‘org.openqa.selenium.support.ui’. The object of the Select class is created using the new keyword. Select class allows you to select options based on their visible text, value, index, deselect options. It also simplifies the process of working with dropdowns.

First you need to locate the dropdown element on the webpage with the help of selenium locators, such as ID, class, xpath or css selector. Second you need to pass the located dropdown element to the select class constructor as a parameter. Now the object represents as the dropdown element and provides you the method for interacting with it. Below we will explore the methods to handle the Select dropdowns efficiently.

• selectByValue():

When the dropdown options have associated values in the HTML attribute (such as the ‘value’ attribute), then you can use ‘selectByValue()’ method. This method accepts string parameter, which represents the value attribute. 

• selectByVisibleText():

When the dropdown options are displayed as visible text, then you can use ‘selectByVisibleText()’ method to select options by visible text. This method accepts string parameter, which represents the visible text to be selected.

• selectByIndex():

In some situations, dropdown options are not uniquely identifiable by their text or value. Then in that case, you use ‘selectByIndex()’ method, to select the option based on the index. This method accepts integer as parameter, which represents the index value to be selected. Usually, index starts at 0 and increments furthering for the available options in the dropdown.

• getOptions():

We can use getOptions() method to retrieve all the options belonging to the Select element. This method accepts no parameters and returns a List of WebElements that represents the options within the dropdown. Further, it also helps to perform operations such as validating options, iterating through them, or selecting specific options based on requirements.

• isMultiple():

Sometimes, dropdown menu displays the option to select multiple values within the dropdown. ‘isMultiple()’ method helps you to determine if the Select element supports multiple selection options simultaneously or not. This method accepts no parameters and returns a Boolean value (‘true’ if multiple selection is supported, ‘false’ otherwise).

• deselectAll():

This method helps you to clear all the selected options in a multiselected dropdown, to ensure that no options remain selected before performing further interactions or validations in scripts.

Handling dropdowns without Select Class:

In some cases, dropdowns are created with ‘<div>’, ‘<ul>’, ‘<li>’, ‘<buttons>’ HTML tag , where you can’t use the Select class. Let’s explore alternative approach to handle dropdown without Select class.

• Iterating through dropdown options stored in a list:

This method locates the dropdown element and retrieves all the option into a List. Then by iterating through the list, each option is inspected, and you can select the text or value based on the specific criteria. In the example below, you need to first click the dropdown box then store the options in a list. Then by iterating through the list of options you can select the desired option.

• Utilizing custom locators for direct dropdown selection:

This method helps you to select the specific dropdown option by using custom locators (xpath or css selectors). This method also eliminates the need to iterate, thus minimizing the time to execute the script. In the example below, click on the dropdown box and by choosing the locator for desired option, perform click action on the WebElement.

• JavaScriptExecutor for dropdown interaction:

This ‘executeScript’ method of JavaScriptExecutor interacts with the dropdown elements , without using WebDriver methods. In the below example, JavaScriptExecutor directly selects the desired option bypassing Selenium interactions. It is a powerful tool and should be used with caution.

• Using sendKeys method:

The sendKeys method helps you to stimulate keystrokes to input the desired dropdown value directly. This method is effective for dropdowns that accept text input. In the below example, the dropdown accepts text input, so you can use ‘sendKeys’ method to type the text and directly select the dropdown option. This method should be used only when the dropdown element supports the text input.

• Using Action Class:

The Action Class method helps you to stimulate mouse movement and clicks on dropdown elements and options. In the below example, action is performed to move to the desired option in the dropdown element and click on it. Action class is useful when dealing with dropdowns that require hover actions or clicks to reveal options.

Handling Dynamic Dropdowns:

When dealing with dynamic dropdowns, the options are loaded based on user actions or external data sources. In such cases, you must wait for the options to become available before interacting with the dropdown. In such scenarios, you can implement explicit wait conditions like ExpectedConditions.visibilityOfElementLocated() or ExpectedConditions.elementToBeClickable() to wait for the dropdown element to become visible or clickable. Once the dropdown is populated, you can select the desired options with the methods discussed earlier.

In this example, we have explicitly added wait for 30 seconds for the options to be loaded and then stored it in a list of WebElements. Then by iterating through the list, you can choose the desired option. In this way, you can handle dynamic dropdowns.

Conclusion:

For an effective web automation testing, it is essential for you to understand the techniques to manage dropdowns in Selenium WebDriver. With the methods discussed above you can select, deselect, and retrieve options within dropdown fields using Select class. You can also locate dropdown elements or stimulate user interactions if select tag is unavailable. Also, you can incorporate explicit waits to handle dynamic dropdowns.

Happy Learning!