如何处理 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, and Real-Time Communication with Node.js下一篇：React Components (Class-based vs Functional)

相关文章

查看更多

• 深入浅析Bootstrap列表组组件
• JavaScript函数柯里化详解
• JS密码生成与强度检测完整实例(附demo源码下载)
• Angularjs整合微信UI（weui）
• JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧

公益在线PHP培训，帮助PHP学习者快速成长！

关于我们免责声明Sitemap

© php.cn All rights reserved