社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 如何处理 Cypress 中的动态下拉菜单

如何处理 Cypress 中的动态下拉菜单

Mary-Kate Olsen
Mary-Kate Olsen
Sep 27, 2024 pm 10:41 PM

How to Handle Dynamic Dropdown in 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