当前位置：首页 > 文章列表 > 文章 > 前端 > 如何处理 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：

模拟用户交互：

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

如果您的下拉列表不使用原生

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

第 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）使用不使用本机

忘记密码

登录即同意用户协议和隐私政策