How to Handle Dynamic Dropdown in Cypress

Introduction

Handling dynamic dropdowns is a common challenge in modern web applications, especially when dropdown options are fetched dynamically from APIs or loaded based on user interactions. When automating tests for such dropdowns using Cypress, you need to ensure that the right options are selected, even if they are rendered after some delay.

This blog will walk you through the process of interacting with dynamic dropdowns in Cypress and provide examples for common scenarios, including dropdowns populated by API responses and dropdowns that change based on user input.

Why Are Dynamic Dropdowns Challenging?

Dynamic dropdowns often pose testing challenges because:

• Options are not present initially: The dropdown options may be loaded asynchronously after a user action or API call.
• Dropdown content changes: Based on user input or interactions, the dropdown options might change dynamically.
• DOM updates: Cypress needs to wait for the DOM to update before interacting with the dropdown.

Cypress provides several powerful commands to handle these challenges, ensuring that you can select the right option from a dynamic dropdown reliably.

Step-by-Step Guide to Handling Dynamic Dropdowns

Let’s go through a basic example to understand how Cypress can handle dynamic dropdowns.

Step 1: Interact with the Dropdown Trigger
Most dynamic dropdowns are initially hidden and only appear when the user clicks on a button or input field. To begin, you need to interact with the trigger element.

Example HTML:

<select id="country-dropdown">
  <option value="" disabled selected>Select a country</option>
</select>
<button id="load-countries">Load Countries</button>

To simulate user interaction:

it('should click the button to load dropdown options', () => {
  cy.visit('/dropdown-page'); // Visit the page with the dynamic dropdown
  cy.get('#load-countries').click(); // Click the button to load the dropdown options
});

This clicks the button, which in this example triggers an API call or another process to populate the dropdown options dynamically.

Step 2: Wait for the Dropdown to Populate
In dynamic dropdowns, the options may not be available immediately. Cypress can use assertions like should('exist') or wait for elements to become available.

Example of handling the dropdown after population:

it('should wait for dropdown options to be populated', () => {
  cy.get('#country-dropdown').should('exist').click(); // Click to open the dropdown

  // Wait for the dropdown options to populate
  cy.get('#country-dropdown option').should('have.length.greaterThan', 1);
});

Here, Cypress waits until the dropdown options are available before proceeding.

Step 3: Select an Option Dynamically
Once the dropdown is populated, you can select the desired option using cy.select() or by directly interacting with the DOM elements.

Example of selecting a country:

it('should select a country from the dynamic dropdown', () => {
  cy.get('#country-dropdown').select('India'); // Select by visible text
});

If your dropdown doesn't use a native <select> element (e.g., a custom dropdown component), you can manually click the dropdown options:

it('should manually select a country from a custom dropdown', () => {
  cy.get('#country-dropdown').click(); // Open the dropdown

  // Select the desired option by clicking on the visible text
  cy.contains('li', 'India').click(); 
});

Handling Type and Search Dynamic Dropdowns

Many modern applications use a type-and-search dropdown where users type into an input field, and the dropdown options are dynamically filtered based on the entered text. Let’s take a look at how to handle such scenarios in Cypress.

Example Type-and-Search Dynamic Dropdown
Example HTML structure:

<div class="search-dropdown">
  <input type="text" id="search-input" placeholder="Search countries...">
  <ul id="dropdown-options">
    <li>USA</li>
    <li>Canada</li>
    <li>Australia</li>
  </ul>
</div>

In this case, the options in the dropdown are filtered based on the user’s input.

Step 1: Type and Filter Options
When typing into the input field, Cypress can simulate user typing and dynamically filter the options.

it('should filter and select a country from a type-and-search dropdown', () => {
  cy.get('#search-input').type('Can'); // Type into the input field to filter options

  // Verify that the filtered result appears
  cy.get('#dropdown-options li').should('have.length', 1);

  // Verify that the option matches the search term
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Click to select the filtered option
  cy.get('#dropdown-options li').first().click();
});

In this case, the options in the dropdown are filtered based on the user’s input.

Step 1: Type and Filter Options
When typing into the input field, Cypress can simulate user typing and dynamically filter the options.

it('should filter and select a country from a type-and-search dropdown', () => {
  cy.get('#search-input').type('Can'); // Type into the input field to filter options

  // Verify that the filtered result appears
  cy.get('#dropdown-options li').should('have.length', 1);

  // Verify that the option matches the search term
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Click to select the filtered option
  cy.get('#dropdown-options li').first().click();
});

This code simulates typing Can into the search box, verifies that the dropdown is filtered to show only "Canada," and then selects that option.

Step 2: Wait for Dropdown Options to Load Dynamically (API-driven)
Sometimes, the type-and-search dropdown is backed by an API that returns options based on the user's input. Cypress can wait for the API response and validate the options.

it('should handle type-and-search dropdown populated by API', () => {
  // Intercept the API call triggered by typing
  cy.intercept('GET', '/api/countries?search=Can', {
    fixture: 'filtered-countries.json'  // Mocked API response with filtered data
  }).as('searchCountries');

  // Type into the input to trigger the API call
  cy.get('#search-input').type('Can');

  // Wait for the API response
  cy.wait('@searchCountries');

  // Validate the filtered results
  cy.get('#dropdown-options li').should('have.length', 1);
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Select the option
  cy.get('#dropdown-options li').first().click();
});

Here, we use cy.intercept() to intercept and mock the API request that fetches filtered options based on the typed input.

Handling Dropdowns Populated by API Calls

Dynamic dropdowns are often populated by API calls, meaning the data isn't available until the server responds. To handle these dropdowns, Cypress provides cy.intercept() to mock or intercept network calls.

Here’s an example of intercepting an API response and selecting a value from a dynamically populated dropdown:

it('should handle dropdown populated by API', () => {
  // Intercept the API call
  cy.intercept('GET', '/api/countries', { fixture: 'countries.json' }).as('getCountries');

  cy.get('#load-countries').click(); // Trigger the API call

  // Wait for the API call to complete
  cy.wait('@getCountries');

  // Now select an option from the populated dropdown
  cy.get('#country-dropdown').select('Australia');
});

In this case, we use cy.intercept() to mock the /api/countries endpoint and provide a fixture (countries.json) with predefined data. This ensures that the dropdown is populated with the expected values, even in a test environment.

Handling Custom Dropdown Components

Many modern frameworks (like React, Angular, or Vue) use custom dropdown components that don’t use native <select> elements. These components often have their own structure and require custom handling.

Here’s an example with a custom dropdown built using div and li elements:

<div class="dropdown">
  <div class="dropdown-trigger">Select a country</div>
  <ul class="dropdown-options">
    <li>USA</li>
    <li>Canada</li>
    <li>Australia</li>
  </ul>
</div>

Here’s how to interact with this type of custom dropdown in Cypress:

it('should select an option from a custom dropdown', () => {
  cy.get('.dropdown-trigger').click(); // Open the custom dropdown
  cy.contains('.dropdown-options li', 'Canada').click(); // Select the option
});

Best Practices for Handling Dynamic Dropdowns in Cypress

1. Use Proper Selectors: Always use specific selectors to avoid flaky tests. Prefer data-* attributes or IDs over generic class selectors.

2. Handle Delays and Dynamic Content: Cypress automatically waits for elements to appear, but you may still need to use .should() or cy.wait() for AJAX-based dropdowns.

3. Mock API Responses: Use cy.intercept() to mock API calls when testing dropdowns populated by dynamic data.

4. Check Dropdown State: Ensure you verify both the closed and open states of the dropdown, especially when dealing with custom components.

5. Avoid Hard-Coding Delays: Instead of using cy.wait(time), leverage cy.intercept() and cy.wait() for API responses to ensure that tests wait for the actual data rather than arbitrary timeouts.

Conclusion

Handling dynamic dropdowns in Cypress doesn’t have to be complicated. With Cypress’s built-in commands like cy.get(), cy.select(), and cy.intercept(), you can easily interact with both native and custom dropdowns, regardless of whether the content is rendered dynamically. By following best practices and using appropriate selectors and waits, you can make your tests more robust, reliable, and maintainable.

Try out these techniques in your Cypress tests to handle dynamic dropdowns effortlessly!