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

Question

我遇到了 Cypress 悬停问题，涉及访问悬停在主菜单项上后出现的子菜单。错误是This element is not visible because it has CSS property: position: fixed and it's being covered by another element: 。我尝试使用 Cypress 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() 触发“show”效果.

它使用 Chrome Devtools 协议(protocol)来自动化 Chrome 开发工具(仅适用于 Chrome 浏览器)。