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

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何处理 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>
&lt;/select&gt;
<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
});

如果您的下拉列表不使用原生 <select> 元素（例如自定义下拉列表组件），您可以手动单击下拉选项：

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">
  &lt;input type=&quot;text&quot; id=&quot;search-input&quot; placeholder=&quot;search countries...&quot;&gt;
  <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');
});

在这种情况下，我们使用 cy.intercept() 来模拟 /api/countries 端点并提供带有预定义数据的固定装置 (countries.json)。这确保了下拉列表填充了预期值，即使在测试环境中也是如此。

处理自定义下拉组件

许多现代框架（如 react、angular 或 vue）使用不使用本机 <select> 元素的自定义下拉组件。这些组件通常有自己的结构，需要自定义处理。

这是一个使用 div 和 li 元素构建的自定义下拉列表的示例：

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

以下是如何与 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
});

cypress 中处理动态下拉菜单的最佳实践

1. 使用适当的选择器：始终使用特定的选择器以避免不稳定的测试。与通用类选择器相比，更喜欢 data-* 属性或 id。

2. 处理延迟和动态内容：cypress 会自动等待元素出现，但您可能仍然需要使用 .should() 或 cy.wait() 来实现基于 ajax 的下拉菜单。

3. 模拟 api 响应： 在测试由动态数据填充的下拉列表时，使用 cy.intercept() 模拟 api 调用。

4. 检查下拉状态： 确保验证下拉列表的关闭和打开状态，尤其是在处理自定义组件时。

5. 避免硬编码延迟：不要使用 cy.wait(time)，而是利用 cy.intercept() 和 cy.wait() 进行 api 响应，以确保测试等待实际数据而不是任意超时。

结论

在 cypress 中处理动态下拉菜单并不一定很复杂。使用 cypress 的内置命令（如 cy.get()、cy.select() 和 cy.intercept()），您可以轻松地与本机和自定义下拉菜单交互，无论内容是否动态呈现。通过遵循最佳实践并使用适当的选择器和等待，您可以使您的测试更加健壮、可靠和可维护。

在 cypress 测试中尝试这些技术，轻松处理动态下拉菜单！

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~