Comment gérer la liste déroulante dynamique dans Cypress

Introduction

La gestion des listes déroulantes dynamiques est un défi courant dans les applications Web modernes, en particulier lorsque les options de liste déroulante sont récupérées dynamiquement à partir des API ou chargées en fonction des interactions de l'utilisateur. Lors de l'automatisation des tests pour de telles listes déroulantes à l'aide de Cypress, vous devez vous assurer que les bonnes options sont sélectionnées, même si elles sont rendues après un certain délai.

Ce blog vous guidera à travers le processus d'interaction avec les listes déroulantes dynamiques dans Cypress et fournira des exemples de scénarios courants, y compris des listes déroulantes remplies par les réponses de l'API et des listes déroulantes qui changent en fonction des entrées de l'utilisateur.

Pourquoi les listes déroulantes dynamiques sont-elles difficiles ?

Les listes déroulantes dynamiques posent souvent des problèmes de test car :

• Les options ne sont pas présentes initialement : Les options déroulantes peuvent être chargées de manière asynchrone après une action de l'utilisateur ou un appel d'API.
• Modifications du contenu du menu déroulant : En fonction des entrées ou des interactions de l'utilisateur, les options du menu déroulant peuvent changer dynamiquement.
• Mises à jour du DOM : Cypress doit attendre que le DOM soit mis à jour avant d'interagir avec la liste déroulante.

Cypress fournit plusieurs commandes puissantes pour relever ces défis, garantissant que vous pouvez sélectionner de manière fiable la bonne option dans une liste déroulante dynamique.

Guide étape par étape pour gérer les listes déroulantes dynamiques

Passons en revue un exemple de base pour comprendre comment Cypress peut gérer les listes déroulantes dynamiques.

Étape 1 : Interagissez avec le déclencheur de liste déroulante
La plupart des listes déroulantes dynamiques sont initialement masquées et n'apparaissent que lorsque l'utilisateur clique sur un bouton ou un champ de saisie. Pour commencer, vous devez interagir avec l'élément déclencheur.

Exemple HTML :

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

Pour simuler l'interaction de l'utilisateur :

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
});

Cliquez sur le bouton qui, dans cet exemple, déclenche un appel API ou un autre processus pour remplir dynamiquement les options de la liste déroulante.

Étape 2 : Attendez que la liste déroulante se remplisse
Dans les listes déroulantes dynamiques, les options peuvent ne pas être disponibles immédiatement. Cypress peut utiliser des assertions comme Should('exist') ou attendre que des éléments soient disponibles.

Exemple de gestion du menu déroulant après 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);
});

Ici, Cypress attend que les options déroulantes soient disponibles avant de continuer.

Étape 3 : Sélectionnez une option de manière dynamique
Une fois la liste déroulante remplie, vous pouvez sélectionner l'option souhaitée en utilisant cy.select() ou en interagissant directement avec les éléments du DOM.

Exemple de sélection d'un pays :

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

Si votre liste déroulante n'utilise pas de paramètre élément (par exemple, un composant déroulant personnalisé), vous pouvez cliquer manuellement sur les options déroulantes :

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(); 
});

Gestion des listes déroulantes dynamiques de type et de recherche

De nombreuses applications modernes utilisent une liste déroulante de saisie et de recherche dans laquelle les utilisateurs saisissent dans un champ de saisie, et les options de la liste déroulante sont filtrées dynamiquement en fonction du texte saisi. Voyons comment gérer de tels scénarios dans Cypress.

Exemple de liste déroulante dynamique de saisie et de recherche
Exemple de structure HTML :

<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>

Dans ce cas, les options de la liste déroulante sont filtrées en fonction de la saisie de l'utilisateur.

Étape 1 : Options de saisie et de filtrage
Lors de la saisie dans le champ de saisie, Cypress peut simuler la saisie de l'utilisateur et filtrer dynamiquement les 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();
});

Dans ce cas, les options de la liste déroulante sont filtrées en fonction de la saisie de l'utilisateur.

Étape 1 : Options de saisie et de filtrage
Lors de la saisie dans le champ de saisie, Cypress peut simuler la saisie de l'utilisateur et filtrer dynamiquement les 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();
});

Ce code simule la saisie de Can dans le champ de recherche, vérifie que la liste déroulante est filtrée pour afficher uniquement « Canada », puis sélectionne cette option.

Étape 2 : Attendez que les options de liste déroulante se chargent dynamiquement (pilotées par l'API)
Parfois, la liste déroulante de saisie et de recherche est soutenue par une API qui renvoie des options basées sur la saisie de l'utilisateur. Cypress peut attendre la réponse de l'API et valider les 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();
});

Ici, nous utilisons cy.intercept() pour intercepter et simuler la requête API qui récupère les options filtrées en fonction de l'entrée saisie.

Gestion des listes déroulantes remplies par les appels d'API

Les listes déroulantes dynamiques sont souvent remplies par des appels d'API, ce qui signifie que les données ne sont pas disponibles tant que le serveur n'a pas répondu. Pour gérer ces listes déroulantes, Cypress fournit cy.intercept() pour simuler ou intercepter les appels réseau.

Voici un exemple d'interception d'une réponse API et de sélection d'une valeur dans une liste déroulante remplie dynamiquement :

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

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!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!