Cypress: Dropdowns

Dropdowns in web applications can be implemented in different ways, and Cypress offers multiple strategies to work with them depending on the type of dropdown element used.

Types of Dropdowns

1. Native HTML Dropdowns (<select> elements)

These are standard HTML dropdowns using the <select> and <option> tags.

How Cypress handles it:

Use the .select() command to choose an option by its visible text or value.

Cypress doesn't need to simulate opening the dropdown—it sets the value programmatically, just like a user would.

2. Custom-Styled Dropdowns (JavaScript-rendered)

Many modern web applications use dropdown components built with JavaScript frameworks like React, Vue, or Angular. These are not actual <select> elements but are rendered using other tags like <div>, <ul>, <li>, etc.

How Cypress handles it:

Since .select() doesn't work on non-<select> elements, you interact with these as a user would:

1. Click to open the dropdown.

2. Click on the visible option.

These selectors vary based on how the component is implemented.

How to Identify Dropdown Types

Indicator	What It Means
The element is a <select> tag	Use .select()
Options are <li>, <div>, etc.	Use .click() and .contains()
Looks like a dropdown but isn't	Likely a custom component
Dropdown doesn't open visually	May be hidden or need force: true

Inspect the DOM using browser DevTools to determine which structure you're working with.

Best Practices for Testing Dropdowns in Cypress

• Always inspect the HTML to confirm the element type.

• Use .scrollIntoView() to ensure the dropdown is visible before interacting.

• Use force: true only when necessary (e.g., when elements are hidden or overlapped).

• For native selects, prefer .select() over clicks for reliability.

• Always assert the selected value or visible label after interaction.

Sample Cypress Test: Native <select> with Custom UI

This test interacts with a custom-styled dropdown that still uses a real <select> element in the DOM, making it compatible with Cypress's .select() command.

Summary

Dropdown Type	Cypress Method	Notes
Native <select>	.select()	Reliable and straightforward
Custom dropdown	.click() + .contains()	Requires simulating full user behavior
Hidden elements	.click({ force: true })	Use only if necessary