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

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签如何处理

介绍

处理动态下拉菜单是现代 web 应用程序中的一个常见挑战，特别是当下拉选项是从 api 动态获取或基于用户交互加载时。当使用 cypress 对此类下拉菜单进行自动化测试时，您需要确保选择正确的选项，即使它们是在延迟一段时间后渲染的。

本博客将引导您完成与 cypress 中的动态下拉列表交互的过程，并提供常见场景的示例，包括由 api 响应填充的下拉列表和根据用户输入更改的下拉列表。

为什么动态下拉菜单具有挑战性？

动态下拉列表通常会带来测试挑战，因为：

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', () =&gt; {  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', () =&gt; {  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', () =&gt; {  cy.get('#country-dropdown').select('india'); // select by visible text});

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

it('should manually select a country from a custom dropdown', () =&gt; {  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', () =&gt; {  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', () =&gt; {  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', () =&gt; {  // 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', () =&gt; {  // 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）使用不使用本机元素的自定义下拉组件。这些组件通常有自己的结构，需要自定义处理。

这是一个使用 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', () =&gt; {  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 测试中尝试这些技术，轻松处理动态下拉菜单！

文章推荐

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

介绍

为什么动态下拉菜单具有挑战性？

处理动态下拉菜单的分步指南

处理类型和搜索动态下拉列表

处理由 api 调用填充的下拉菜单

处理自定义下拉组件

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

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？