当前位置：首页 > 文章列表 > 文章 > 前端 > 如何处理 Cypress 中的动态下拉菜单

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

来源：dev.to 2024-10-05 18:09:59 0浏览收藏

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

如果您的下拉列表不使用原生元素的自定义下拉组件。这些组件通常有自己的结构，需要自定义处理。

这是一个使用 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 中处理动态下拉菜单的最佳实践

使用适当的选择器：始终使用特定的选择器以避免不稳定的测试。与通用类选择器相比，更喜欢 data-* 属性或 id。
处理延迟和动态内容：cypress 会自动等待元素出现，但您可能仍然需要使用 .should() 或 cy.wait() 来实现基于 ajax 的下拉菜单。
模拟 api 响应： 在测试由动态数据填充的下拉列表时，使用 cy.intercept() 模拟 api 调用。
检查下拉状态： 确保验证下拉列表的关闭和打开状态，尤其是在处理自定义组件时。
避免硬编码延迟：不要使用 cy.wait(time)，而是利用 cy.intercept() 和 cy.wait() 进行 api 响应，以确保测试等待实际数据而不是任意超时。

结论

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

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

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

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除