如何解决Cypress中hover触发子菜单显示失败的问题

问题根因 #

你遇到的样式修改不生效问题核心有两点：

1. 使用invoke('attr', 'style', 'position: absolute')直接覆盖了元素的全部行内样式，可能清除了子菜单原本的显示相关配置；同时没有添加!important标识，修改的样式优先级低于父元素hover触发的CSS规则，父元素hover状态丢失后，子菜单样式会被直接重置回position: fixed，所以断言时样式符合预期，但后续执行命令时样式已经被覆盖。
2. 没有先触发主菜单项的hover事件，子菜单本身处于未激活的隐藏状态，单独修改子菜单样式无法匹配对应的渲染逻辑。

可行解决方案（无需{ force: true }） #

方案1：模拟父元素hover + 强制覆盖子菜单样式

先触发主菜单项的hover事件激活子菜单渲染，再用invoke('css')修改子菜单的必要样式，添加!important保证优先级最高，同时设置高z-index避免被其他元素遮挡：

// 替换为你实际的主菜单项选择器
cy.get('.header-module--mainMenuItem').trigger('mouseover');

// 修改子菜单样式，强制可见
cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0)
  .invoke('css', {
    'position': 'absolute !important',
    'display': 'block !important',
    'visibility': 'visible !important',
    'opacity': '1 !important',
    'z-index': '99999 !important'
  })
  // 直接断言可见，比校验样式属性更准确
  .should('be.visible');

// 后续正常操作子菜单项即可
cy.contains('目标子菜单文本').click();

方案2：直接操作父元素显示类（更稳定）

如果你的菜单显隐是通过父元素添加指定类名控制的（常见如open、is-hover等），可以直接给父元素添加对应类名，不需要模拟hover事件：

// 替换为实际的主菜单选择器和控制显隐的类名
cy.get('.header-module--mainMenuItem').invoke('addClass', 'open');

// 等待子菜单可见后操作
cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0)
  .should('be.visible')
  .contains('目标子菜单文本')
  .click();

注意事项 #

如果菜单本身是动态渲染的，可以在获取子菜单前加should('exist')先断言元素存在，避免获取到未挂载的元素。

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