Cypress - 下拉菜单

Cypress - 与下拉菜单交互

下拉菜单 (Dropdown menus) 是常见的 UI（用户界面）元素，用于从列表中选择一个或多个选项。Cypress 提供 cy.select() 命令专门用于与原生的 HTML <select> 元素进行交互。对于自定义构建的下拉菜单（使用 <div>、<ul> 等），您需要使用标准的交互命令，如 cy.click()。

使用 `cy.select()` 处理原生 `<select>` 元素

cy.select() 命令可以通过文本内容、value 属性或索引来选择 <select> 元素内的 <option>。如果 <select> 元素具有 multiple 属性，它也可以处理多选。

按文本内容选择: cy.get('select').select('Option Text')
按 value 属性选择: cy.get('select').select('option_value')
按索引选择: cy.get('select').select(0) // 选择第一个选项
选择多个选项（按文本或 value）: cy.get('select[multiple]').select(['Option Text 1', 'value_2'])

// 示例: 按可见文本选择一个选项
cy.get('#my-dropdown').select('Apples');

// 示例: 按 value 属性选择一个选项
cy.get('#my-dropdown').select('fruit-apple');

// 示例: 在多选下拉菜单中选择多个选项
cy.get('#my-multi-select-dropdown').select(['Bananas', 'cherries-value']);

`cy.select()` 的选项

cy.select() 命令接受一个可选的 options 对象来修改其默认行为：

log (布尔值, 默认值: true): 是否在 Cypress Command Log 中显示该命令。
timeout (数字, 默认值: defaultCommandTimeout): 等待 select 操作完成的最大时间（毫秒），超过则失败。
force (布尔值, 默认值: false): 强制执行操作，禁用可操作性检查（例如，如果元素被隐藏或禁用）。谨慎使用。

// 示例: 使用 force 选项
cy.get('select#country').select('India', { force: true });

选择选项后，关键是断言 (assert) 选择成功。您可以通过检查 <select> 元素的值来实现这一点：

cy.get('select#country').select('99');
cy.get('select#country').should('have.value', '99');

// 或者，检查选中选项的文本内容（更复杂一些）:
// cy.get('select#country option:selected').should('have.text', 'India');

考虑一个用于选择国家的 HTML 下拉菜单：<select id="country"><option value="1">USA</option><option value="99">India</option>...</select>。我们想选择 ‘India’。

`<select>` 的实现示例

以下测试演示了在一个注册页面的国家下拉菜单中选择 ‘India’（其值为 ‘99’），并断言该选择成功：

describe('Dropdown Selection Test', () => {
  it('Should select a country from a static dropdown', () => {
    cy.visit('https://register.rediff.com/register/register.php'); // 示例页面

    // 按其 value '99' 选择选项 'India'
    cy.get('select[id="country"]').select('99');

    // 断言下拉菜单的值现在是 '99'
    cy.get('select[id="country"]').should('have.value', '99');
  });
});

执行结果：

Cypress 测试运行器 (Test Runner) 将显示针对国家下拉菜单的 cy.select() 命令。选择完成后，如果 ‘India’ 被正确选中，should('have.value', '99') 断言将通过。Command Log 将以视觉方式确认这些步骤。

这证实了 ‘Country’ 下拉菜单正确反映了对 ‘India’ 的选择，该选项通过其 HTML value ‘99’ 来标识。

处理自定义构建的下拉菜单

许多现代 Web 应用程序使用自定义构建的下拉菜单，这些菜单使用 <div>、<span>、<ul>、<li> 标签或来自 UI 库（例如 React Select、Material UI）的组件构建。cy.select() 命令对这些自定义下拉菜单无效。

要与自定义下拉菜单交互，您需要模拟用户操作：

点击打开/触发下拉菜单的元素（例如，cy.get('.custom-dropdown-trigger').click();）。
在现在可见的选项列表中定位所需的选项（例如，cy.get('.dropdown-menu .option').contains('Desired Option Text');）。
点击所需的选项（.click();）。
断言选择被正确反映（例如，触发元素现在显示选定的文本，或者隐藏的输入字段具有正确的值）。

describe('Custom Dropdown Test', () => {
  it('Should select an option from a custom dropdown', () => {
    cy.visit('/my-page-with-custom-dropdown'); // 您的应用程序页面

    // 1. 点击打开自定义下拉菜单
    cy.get('.custom-dropdown-toggle').click();

    // 2. 找到并点击所需的选项
    // 最好在点击前确保选项可见
    cy.get('.custom-dropdown-options li').contains('My Desired Option').should('be.visible').click();

    // 3. 断言选择结果
    cy.get('.custom-dropdown-toggle .selected-text').should('have.text', 'My Desired Option');
  });
});

与自定义下拉菜单交互需要更具体的定位器 (selectors) 和一系列操作，但这遵循标准的 Cypress 交互模式。务必检查自定义组件的 HTML 结构，以确定正确的定位器和操作。有关更多策略，请搜索 ‘Cypress custom dropdown testing’ 或查阅特定 UI 库的文档。

Cypress - 下拉菜单

Cypress - 与下拉菜单交互

使用 cy.select() 处理原生 <select> 元素

cy.select() 的选项

<select> 的实现示例

处理自定义构建的下拉菜单

使用 `cy.select()` 处理原生 `<select>` 元素

`cy.select()` 的选项

`<select>` 的实现示例