如何處理 Cypress 中的動態下拉式選單

介绍

处理动态下拉菜单是现代 Web 应用程序中的一个常见挑战，特别是当下拉选项是从 API 动态获取或基于用户交互加载时。当使用 Cypress 对此类下拉菜单进行自动化测试时，您需要确保选择正确的选项，即使它们是在延迟一段时间后渲染的。

本博客将引导您完成与 Cypress 中的动态下拉列表交互的过程，并提供常见场景的示例，包括由 API 响应填充的下拉列表和根据用户输入更改的下拉列表。

为什么动态下拉菜单具有挑战性？

动态下拉列表通常会带来测试挑战，因为：

• 选项最初不存在：下拉选项可能会在用户操作或 API 调用后异步加载。
• 下拉内容更改：根据用户输入或交互，下拉选项可能会动态更改。
• DOM 更新： Cypress 需要等待 DOM 更新才能与下拉菜单交互。

Cypress 提供了多个强大的命令来应对这些挑战，确保您可以可靠地从动态下拉列表中选择正确的选项。

处理动态下拉菜单的分步指南

让我们通过一个基本示例来了解 Cypress 如何处理动态下拉菜单。

第 1 步：与下拉触发器交互
大多数动态下拉菜单最初是隐藏的，仅在用户单击按钮或输入字段时才显示。首先，您需要与触发元素进行交互。

示例 HTML：

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

模拟用户交互：

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

这会单击按钮，在此示例中会触发 API 调用或另一个进程来动态填充下拉选项。

第 2 步：等待下拉菜单填充
在动态下拉菜单中，选项可能无法立即可用。 Cypress 可以使用诸如 should('exist') 之类的断言或等待元素变得可用。

填充后处理下拉列表的示例：

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

在这里，Cypress 会等到下拉选项可用后再继续。

第 3 步：动态选择选项
填充下拉列表后，您可以使用 cy.select() 或直接与 DOM 元素交互来选择所需的选项。

选择国家/地区的示例：

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

如果您的下拉菜单不使用本机；元素（例如自定义下拉组件），您可以手动单击下拉选项：

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

处理类型和搜索动态下拉列表

许多现代应用程序使用类型和搜索下拉列表，用户在输入字段中键入内容，并且下拉选项会根据输入的文本动态过滤。让我们看看 Cypress 中如何处理此类场景。

类型和搜索动态下拉列表示例
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>

在这种情况下，下拉列表中的选项将根据用户的输入进行过滤。

第 1 步：输入和筛选选项
当在输入字段中输入内容时，Cypress 可以模拟用户输入并动态过滤选项。

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

在这种情况下，下拉列表中的选项将根据用户的输入进行过滤。

第 1 步：输入和筛选选项
当在输入字段中输入内容时，Cypress 可以模拟用户输入并动态过滤选项。

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

此代码模拟在搜索框中输入 Can，验证下拉列表是否已过滤为仅显示“加拿大”，然后选择该选项。

第 2 步：等待下拉选项动态加载（API 驱动）
有时，类型和搜索下拉列表由 API 支持，该 API 根据用户的输入返回选项。 Cypress 可以等待 API 响应并验证选项。

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

在这里，我们使用 cy.intercept() 来拦截和模拟 API 请求，该请求根据键入的输入获取过滤选项。

处理由 API 调用填充的下拉菜单

动态下拉列表通常由 API 调用填充，这意味着在服务器响应之前数据不可用。为了处理这些下拉菜单，Cypress 提供了 cy.intercept() 来模拟或拦截网络调用。

以下是拦截 API 响应并从动态填充的下拉列表中选择值的示例：

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!

以上是如何處理 Cypress 中的動態下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！

json ajax html angular if for select require try Filter using class Generic dom this input li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：WebSockets、Socket.IO 以及與 Node.js 的即時通信下一篇：WebSockets、Socket.IO 以及與 Node.js 的即時通信

相關文章

看更多

• 深入淺析Bootstrap列表組元件
• JavaScript函數柯里化詳解
• JS密碼產生與強度偵測完整實例(附demo源碼下載)
• Angularjs整合微信UI（weui）
• JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們免責聲明Sitemap

© php.cn All rights reserved