如何解决 Cypress 中的悬停问题？

Question

我遇到了有关访问悬停在主菜单项上后出现的子菜单的赛普拉斯悬停问题。错误是This element is not visible because it has CSS property: position: fixed and it's being covered by another element:。我尝试使用赛普拉斯推荐的解决方法https://docs.cypress.io/api/commands/hover#Workarounds但没有成功。Cypress 文档说“使用 .trigger() 只会影响 JavaScript 中的事件，不会触发 CSS 中的任何效果”，所以我首先尝试更改元素的 CSS 属性，然后使用 .trigger 命令：

        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('attr', 'style', 'position: absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).should('have.attr', 'style', 'position: absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('show');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).trigger('mouseover');

但它不起作用。不管我确认 expected <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> to have attribute style with the value **position: absolute**我在最后一步有同样的错误This element <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> is not visible because it has CSS property: **position: fixed** and it's being covered by another element:。如何在不使用{ force: true }参数的情况下访问隐藏的子菜单？

Answer 1

选择器可能有问题，因为您设置position: absolute并确认了它，但消息仍然引用position: fixed。

假设选择器正常，您可能可以使用 cypress-real-events 触发“显示.realHover()”效果。

它使用 Chrome Devtools 协议来自动化 chrome devtools（仅适用于 chrome 浏览器）。