Cypress - Dropdown

Cypress - Interacting with Dropdown Menus

Dropdown menus are common UI elements for selecting one or more options from a list. Cypress provides the cy.select() command specifically for interacting with native HTML <select> elements. For custom-built dropdowns (using <div>, <ul>, etc.), you’ll use standard interaction commands like cy.click().

Using cy.select() for Native <select> Elements

The cy.select() command can select an <option> within a <select> element by its text content, value attribute, or index. It can also handle multiple selections if the <select> element has the multiple attribute.

• Select by text content: cy.get('select').select('Option Text')
• Select by value attribute: cy.get('select').select('option_value')
• Select by index: cy.get('select').select(0) // Selects the first option
• Select multiple options (by text or value): cy.get('select[multiple]').select(['Option Text 1', 'value_2'])

// Example: Selecting an option by its visible text
cy.get('#my-dropdown').select('Apples');

// Example: Selecting an option by its value attribute
cy.get('#my-dropdown').select('fruit-apple');

// Example: Selecting multiple options in a multi-select dropdown
cy.get('#my-multi-select-dropdown').select(['Bananas', 'cherries-value']);

Options for cy.select()

The cy.select() command accepts an optional options object to modify its default behavior:

• log (boolean, default: true): Whether to display the command in the Cypress Command Log.
• timeout (number, default: defaultCommandTimeout): Max time (in ms) to wait for the select action to complete before failing.
• force (boolean, default: false): Forces the action, disabling actionability checks (e.g., if the element is hidden or disabled). Use with caution.

// Example: Using the force option
cy.get('select#country').select('India', { force: true });

After selecting an option, it’s crucial to assert that the selection was successful. You can do this by checking the value of the <select> element:

cy.get('select#country').select('99');
cy.get('select#country').should('have.value', '99');

// Or, for text content of the selected option (more complex):
// cy.get('select#country option:selected').should('have.text', 'India');

Consider an HTML dropdown for countries: <select id="country"><option value="1">USA</option><option value="99">India</option>...</select>. We want to select ‘India’.

Implementation Example for <select>

The following test demonstrates selecting ‘India’ (which has a value of ‘99’) from a country dropdown on a registration page and asserting the selection:

describe('Dropdown Selection Test', () => {
  it('Should select a country from a static dropdown', () => {
    cy.visit('https://register.rediff.com/register/register.php'); // Example page

    // Select the option 'India' by its value '99'
    cy.get('select[id="country"]').select('99');

    // Assert that the dropdown's value is now '99'
    cy.get('select[id="country"]').should('have.value', '99');
  });
});

Execution Results:

The Cypress Test Runner will show the cy.select() command targeting the country dropdown. After the selection, the should('have.value', '99') assertion will pass if ‘India’ was correctly selected. The Command Log will visually confirm these steps.

This confirms that the ‘Country’ dropdown correctly reflects the selection of ‘India’, identified by its HTML value ‘99’.

Handling Custom-Built Dropdowns

Many modern web applications use custom dropdowns built with <div>, <span>, <ul>, <li> tags, or components from UI libraries (e.g., React Select, Material UI). The cy.select() command will not work for these.

To interact with custom dropdowns, you need to simulate user actions:

1. Click the element that opens/triggers the dropdown (e.g., cy.get('.custom-dropdown-trigger').click();).
2. Locate the desired option within the now-visible list of options (e.g., cy.get('.dropdown-menu .option').contains('Desired Option Text');).
3. Click the desired option (.click();).
4. Assert that the selection is reflected correctly (e.g., the trigger element now shows the selected text, or a hidden input field has the correct value).

describe('Custom Dropdown Test', () => {
  it('Should select an option from a custom dropdown', () => {
    cy.visit('/my-page-with-custom-dropdown'); // Your application page

    // 1. Click to open the custom dropdown
    cy.get('.custom-dropdown-toggle').click();

    // 2. Find and click the desired option
    // It's good practice to ensure the option is visible before clicking
    cy.get('.custom-dropdown-options li').contains('My Desired Option').should('be.visible').click();

    // 3. Assert the selection
    cy.get('.custom-dropdown-toggle .selected-text').should('have.text', 'My Desired Option');
  });
});

Interacting with custom dropdowns requires more specific selectors and a sequence of actions, but follows standard Cypress interaction patterns. Always inspect the HTML structure of custom components to determine the correct selectors and actions. For more strategies, search for ‘Cypress custom dropdown testing’ or consult documentation for specific UI libraries.