介绍
处理动态下拉菜单是现代 web 应用程序中的一个常见挑战，特别是当下拉选项是从 api 动态获取或基于用户交互加载时。当使用 cypress 对此类下拉菜单进行自动化测试时，您需要确保选择正确的选项，即使它们是在延迟一段时间后渲染的。
本博客将引导您完成与 cypress 中的动态下拉列表交互的过程，并提供常见场景的示例，包括由 api 响应填充的下拉列表和根据用户输入更改的下拉列表。
为什么动态下拉菜单具有挑战性？
动态下拉列表通常会带来测试挑战，因为：
选项最初不存在：下拉选项可能会在用户操作或 api 调用后异步加载。下拉内容更改：根据用户输入或交互，下拉选项可能会动态更改。dom 更新： cypress 需要等待 dom 更新才能与下拉菜单交互。
cypress 提供了多个强大的命令来应对这些挑战，确保您可以可靠地从动态下拉列表中选择正确的选项。
处理动态下拉菜单的分步指南
让我们通过一个基本示例来了解 cypress 如何处理动态下拉菜单。
第 1 步：与下拉触发器交互
大多数动态下拉菜单最初是隐藏的，仅在用户单击按钮或输入字段时才显示。首先，您需要与触发元素进行交互。
示例 html：
select a country
模拟用户交互：
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 结构示例：
- usa
- canada
- australia
在这种情况下，下拉列表中的选项将根据用户的输入进行过滤。
第 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）使用不使用本机 元素的自定义下拉组件。这些组件通常有自己的结构，需要自定义处理。
这是一个使用 div 和 li 元素构建的自定义下拉列表的示例：
select a country
以下是如何与 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 测试中尝试这些技术，轻松处理动态下拉菜单！
以上就是如何处理 Cypress 中的动态下拉菜单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491890.html
微信扫一扫 
支付宝扫一扫 
