Cypress中主菜单提前关闭导致无法点击子菜单的问题

问题分析 #

你当前的代码触发了<h2>元素的mouseenter，但从HTML结构来看，菜单的hover交互逻辑大概率绑定在父级的<a.doormat-heading-link>标签上。直接触发子元素的鼠标事件，可能无法正确触发父元素的hover状态，导致菜单展开异常或提前关闭。

解决方案 #

• 修正触发目标元素
  直接定位到绑定hover事件的<a>标签，触发它的mouseenter：

  cy.get('a.doormat-heading-link').contains('Credit Cards').trigger('mouseenter');
  // 等待子菜单完全可见后再执行点击操作
  cy.get('.子菜单对应的选择器').should('be.visible').click();
  

  或者用xpath定位a标签：

  cy.xpath("//a[@class='doormat-heading-link' and .//h2[normalize-space()='Credit Cards']]")
    .trigger('mouseenter');
  

• 使用更贴近真实用户的hover模拟
  Cypress原生的trigger('mouseenter')有时无法完全模拟真实浏览器的hover行为，可借助cypress-real-events插件实现更真实的交互：

  1. 安装插件：

     npm install cypress-real-events --save-dev
     

  2. 在cypress/support/e2e.js中导入：

     import 'cypress-real-events/support'
     

  3. 替换原有触发逻辑：

     cy.get('a.doormat-heading-link').contains('Credit Cards').realHover();
     cy.get('.子菜单对应的选择器').should('be.visible').click();
     

• 处理菜单的防抖/节流逻辑
  如果菜单的显示逻辑带有防抖或节流，可增加短暂等待确保菜单完全展开：

  cy.get('a.doormat-heading-link').contains('Credit Cards').trigger('mouseenter');
  cy.wait(500); // 根据实际情况调整等待时间
  cy.get('.子菜单对应的选择器').should('be.visible').click();
  

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