介绍
处理动态下拉菜单是现代 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
});
如果您的下拉列表不使用原生 <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">
<input type="text" id="search-input" placeholder="search countries...">
<ul id="dropdown-options">
<li>usa</li>
<li>canada</li>
<li>australia</li>
</ul>
</div>
在这种情况下，下拉列表中的选项将根据用户的输入进行过滤。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
第 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 中处理动态下拉菜单的最佳实践
使用适当的选择器：始终使用特定的选择器以避免不稳定的测试。与通用类选择器相比，更喜欢 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 测试中尝试这些技术，轻松处理动态下拉菜单！
