How to Handle Dropdowns Using the Cypress .select() Command

Dropdowns can be challenging to handle due to dynamic options, inconsistent values, or differences between displayed text. In Cypress, you can overcome this challenge using the .select() command.

It allows you to handle (or select) dropdowns by visible text, value, or index. The Cypress .select() command is a built-in function that interacts with and performs tests on the selected elements in a web application.

In this blog, you will learn everything you need to know about using the Cypress .select() command.

What Is Cypress .select() Command?

The Cypress .select() command is a built-in function that is used to select a <option> tag within the <select> WebElement. It retrieves the selected <option> tags and performs tests on them.

The Cypress .select() command takes in two arguments, the first being value, which can be any of the following; value, index, or text content of the <option> tag.

The second argument is optional but can be specified as a configuration object. For example, (force: true) can be used to undo the default behavior of the .select() command.

HTML:

JavaScript:

Here, we get the <select> WebElement and pass in an integer with a value of zero; then, we assert that the selected WebElement should have a value of “one” as a means of validation before test execution.

The Cypress .select() command is used to handle both types of dropdowns: static and dynamic.

How to Handle Static Dropdowns?

Static dropdowns are a type of select control in which the selection content is loaded in the browser as soon as the page loads. They are usually hard-coded into the HTML of the web page.
There are different ways to select static dropdown options using the Cypress .select() command, including selecting by index, value, or text.

Select by Index

Select by index is one of the methods that can be used to select <option> tag within the <select> element. The index refers to an integer that represents the number of <option> tags within the parent <select> element. The first element is identified as 0, and then the second as 1, and so on.

To see this in action, let’s use the LambdaTest eCommerce Playground.

1. Open the LambdaTest eCommerce Playground on your web browser.
2. Press the Tab with F12 on your keyboard to launch the DevTools.
#entry_212434 #input-sort-212434

1	#entry_212434 #input-sort-212434

Copy the above CSS selector and press CTRL + F. Then, paste the CSS selector in the find box indicated by the red box.

This should target and select the right WebElement as highlighted in the yellow color below:

After identifying the selected element, run the Cypress test script below to execute the test case:

Your test run should be indicated as shown below:

In the image above, the Best Sellers option is selected in the select control.

Select by Value

Selecting a dropdown by value is very similar to selecting an element by index. Instead of passing integers as value to the .select() command, the value property of the <option> tag is used instead.

The code above used the .select() command to interact with the <select> WebElement and retrieve the <option> tag with the value Popular text.

Here, the <select> WebElement uses the value to choose the Popular option, which corresponds to the text displayed in the dropdown. The test simulates selecting the most popular items on the Canon product list by interacting with the dropdown element.

Select by Text

To select an element by text, the .select() command received the text content as an argument.

Here, the text content of the <option> element Newest is passed to the .select() command. This allows Cypress to retrieve the WebElement associated with Newest and then perform a test on it.

From the image above, the select control selected the <option> element with the text content of the Newest element.

How to Handle Dynamic Dropdowns?

Dynamic dropdowns are selection controls in which the options are rendered dynamically depending on the content or user search input.

Initially, the <option> elements are not present when the page first loads. Instead, the dropdown waits for the user’s input or an event to trigger before it loads the options dynamically into the page.

Cypress sends requests by passing text into the input control. It then waits for the content to load on the page before interacting with it.

To handle dynamic dropdowns in Cypress, you can use .contains() and .each() commands.

.contains() Command

The .contains() command in Cypress retrieves the DOM element containing the text passed in. It can take more than one argument.

Syntax:

To demonstrate, we will leverage the Cypress .contains() command to dynamically interact with dropdowns on a web page.

We will use the LambdaTest eCommerce Playground. When a user inputs “iPhone” into the navigation search bar, a list of matching product items is displayed as clickable links within the dropdown.

The Cypress .contains() command is used to assert that the search query is present within the returned product list and, if found, triggers a click action on the corresponding item. This approach is particularly useful for automating the testing of dynamic dropdowns and validating that search functionality behaves as expected.

Output:

.each() Command

The .each() command in the dynamic dropdown iterates through the elements that match the specified text and provides an interface to interact with the selected WebElement.

Syntax:

Here, the below test script loads the specified web address and retrieves the DOM element of the input tag on the navbar.

It clicks on the input tag and types the iPod text. Then it iterates over all the dynamic dropdowns and checks if the element that contains iPod matches the content Nano, and if this is true, a click operation is performed.

Advanced Use Cases of Cypress .select() Commands

When handling dropdowns, some WebElements are hidden or disabled by default, making them difficult to retrieve with the .select() command in Cypress.

Let’s look at how to handle disabled and hidden dropdowns.

Disabled Dropdowns

Disabled dropdowns are select controls set to disable using the disabled property in HTML, or :disabled CSS pseudo-class. Disabled elements prevent users from interacting with the specified WebElement.

When elements are set to disabled, it stops functioning as usual and does not respond to mouse input, keyboard events, or any other user-stimulated interaction. However, when using the Cypress .select() command, disabled elements are, by default, turned off as false. This means it cannot be selected with the Cypress .select() command.

To bypass this, the Cypress .select() command provides a second argument called force object. The force object takes in a boolean value as true to enable Cypress to select the disabled element on the DOM.

Here, we have a select WebElement with a specified disabled element to prevent user interactions.

The <select> WebElements with a disabled property specified, can not be accessed by Cypress. This is the default behavior in Cypress to fix this.

The Cypress .select() command is set to receive a second argument as {force: true}. When the {force: true} property is applied to an element, Cypress interacts with the element directly without enabling it or removing the disabled property in order to perform a test on it.

From the code above, the .select() command received a second argument as force and set its value to true. This enables the Cypress .select() command to interact with the disabled element while it’s still disabled or hidden.

Output:

Hidden Dropdowns

Hidden WebElements are HTML elements styled with display: none in CSS, making them invisible on the web page.

In Cypress, hidden elements are typically disabled from interaction. However, to interact with a hidden element, you can use the {force: true} option, allowing Cypress to forcefully interact with the specified element.

The code above demonstrates a <select> element with its display property set to none, which hides both the <select> element and its child <option> tags, preventing them from appearing on the web page.

Here, the <select> element is set to display: none, which automatically removes the element from the DOM. In this case, the element becomes hidden from users and, as a result, stops Cypress from interacting with it.

To stop the behavior, {force: true} option is set to the .select() command, allowing Cypress to interact with the hidden element.

Output:

Select Multiple Elements

The Cypress .select() command can simultaneously select more than one <option>. This is very useful as it lets you perform multiple test cases on numerous <option> WebElements.

To interact with multiple elements at once, the Cypress .select() command accepts additional arguments in the form of multiple values. These values correspond to the text content of the <option> tags that Cypress needs to select.

Output:

The Cypress .select() command selects the options passed as an argument starting from the Default option.

The above Cypress tests for handling dropdowns are run on the local grid. However, for better scalability and reliability, you can harness the capabilities offered by cloud grids such as LambdaTest.

LambdaTest is an AI-native test execution platform that lets you run tests on the Cypress cloud grid. It offers scalability, intelligent debugging, and AI-driven optimizations to streamline test automation.

Conclusion

The Cypress .select() command is a built-in function that interacts and runs tests on the <select> WebElement and dynamic dropdown in the web application. The <select> WebElement or dynamic dropdown are web controls that provide a menu or list of options for users on the web.

The .select() command can interact with dropdowns by their indexes, values, or text content. It can also run tests on multiple WebElements. However, to perform dynamic selection, more advanced techniques are required, such as .contains() and .each() Cypress commands.

Citations

• Cypress .select() command: https://docs.cypress.io/api/commands/select