Cypress点击下拉按钮后如何保持鼠标停留在按钮上避免菜单收起

核心原因是下拉菜单的显隐逻辑依赖鼠标指针位置，常规点击操作后如果鼠标离开按钮/菜单区域就会触发收起逻辑，按以下方案处理即可：

操作顺序调整（推荐） #

cypress-real-events的realClick执行后默认不会主动移动鼠标，你需要避免后续操作隐式触发鼠标重置，按以下顺序执行即可：

• 先调用realHover将鼠标移动到目标按钮，等待200ms确保悬停事件完全触发
• 直接在当前悬停状态下执行realClick，点击后不要插入任何无关操作，直接对下拉菜单做断言

cy.get('下拉按钮选择器')
  .realHover()
  .wait(200)
  .realClick()
// 点击后直接校验菜单可见性，中间不要插入其他交互操作
cy.get('下拉菜单选择器').should('be.visible')

固定鼠标坐标方案 #

如果上述方案不生效，可以手动指定鼠标停留坐标，避免指针偏移：

cy.get('下拉按钮选择器').then($btn => {
  const rect = $btn[0].getBoundingClientRect()
  const centerX = rect.left + rect.width / 2
  const centerY = rect.top + rect.height / 2
  // 移动鼠标到按钮中心后点击，之后鼠标会停留在该坐标
  cy.realMouseMove(centerX, centerY)
    .wait(200)
    .realMouseDown({ position: 'center' })
    .realMouseUp({ position: 'center' })
  // 校验菜单可见性
  cy.get('下拉菜单选择器').should('be.visible')
})

常见异常处理 #

• 针对ResizeObserver loop limit exceeded报错，可直接在Cypress全局异常监听中忽略，该告警为前端通用非阻断异常，不影响测试逻辑：

// 在cypress/support/e2e.js中添加配置
Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('ResizeObserver loop limit exceeded')) {
    return false
  }
})

• 不要混用Cypress原生click方法和real-events系列方法，避免事件逻辑冲突导致DOM分离报错。

内容的提问来源于stack exchange，提问作者Snowy