Cypress - 鼠标操作

Cypress - 模拟鼠标操作

Cypress 提供了几个命令来模拟鼠标交互，例如悬停、点击可能隐藏或需要特定状态的元素以及右键点击。这些对于测试动态用户界面至关重要。

与悬停时显示的元素交互

许多 Web 应用都有一些元素，例如下拉菜单或工具提示，它们只有当鼠标悬停在触发元素上时才会变得可见。

1. 使用 .trigger('mouseover')

模拟悬停最常见的方法是对显示其他元素的元素使用 .trigger('mouseover') 命令。触发悬停后，你可以与新可见的元素进行交互。

describe('Hover Interactions Test', () => {
  it('should reveal and click a submenu item on hover', () => {
    cy.visit('your-page-with-hover-menu.html'); // 替换为你的测试页面

    // 假设 '#menu-trigger' 在悬停时显示 '#submenu-item'
    cy.get('#menu-trigger').trigger('mouseover');
    cy.get('#submenu-item').should('be.visible').click();
  });
});

2. 对通过 CSS 隐藏的元素使用 .invoke('show')

如果一个元素使用 CSS 隐藏（例如，display: none;），并且悬停使其出现（例如，通过将 display 更改为 block），你可以通过 Cypress 的 .invoke() 命令使用 jQuery 的 show() 方法。这会强制元素变得可见。

这种方法直接操纵 DOM 元素的样式，这可能无法完美模拟用户交互，但对于以这种方式隐藏的元素是有效的。

describe('jQuery Show for Hidden Elements', () => {
  it('should show and click a hidden element', () => {
    cy.visit('your-page-with-hidden-elements.html'); // 替换

    // 假设 '#hidden-content' 被样式设置为 'display: none'
    // 并且 '.hover-container' 是其父元素或触发器
    cy.get('.hover-container .hidden-content')
      .invoke('show') // 强制显示为 display:block 或类似样式
      .should('be.visible')
      .click();
  });
});

如果悬停机制很复杂或 .trigger('mouseover') 对于特定实现无法稳定工作，这种方法特别有用。

使用 { force: true } 强制点击

Cypress 在执行诸如 .click() 等命令之前会执行可操作性检查。这意味着一个元素必须是可见的、未禁用的、未被覆盖的等等。有时，你可能需要绕过这些检查，例如，点击一个被另一个元素覆盖的元素（尽管这通常是潜在的 UI 问题或未能完全模仿用户行为的测试的迹象）。

cy.get('#my-button').click({ force: true });

**注意：**谨慎使用 { force: true }。它可能会隐藏真实用户可能遇到的问题。最好是确保该元素对于用户来说确实是可操作的。

其他鼠标操作

• **.rightclick()：**模拟对元素的右键点击。
• **.dblclick()：**模拟对元素的双击。
• **.trigger('mousedown'), .trigger('mouseup')：**模拟特定的鼠标按钮事件。
• **.check(), .uncheck()：**对于复选框和单选按钮，优先使用这些命令而不是 .click()，以提高清晰度和实现特定行为。
• **.select()：**用于在 <select> 下拉列表中选择选项。

示例：右键点击

describe('Context Menu Test', () => {
  it('should open context menu on right-click', () => {
    cy.visit('your-page-with-context-menu.html'); // 替换

    cy.get('#context-area').rightclick();
    cy.get('#context-menu-option').should('be.visible').click();
  });
});

最佳实践

• **模仿用户行为：**尝试像用户一样与元素交互。在点击悬停显示的元素之前，使用 .trigger('mouseover')。
• **可见性：**确保元素在交互前可见，利用 Cypress 的内置断言 (.should('be.visible'))。
• **尽可能避免使用 { force: true }：**仅在你了解可操作性检查失败的原因并且有充分理由绕过它时使用。

掌握这些鼠标操作模拟是使用 Cypress 测试复杂和交互式 Web 应用的关键。