css - Cypress 将鼠标悬停在名为 "Automation"的菜单选项上

Question

我试图通过使用以下命令将鼠标悬停在菜单选项(镜头 - 它在自动化选项卡下)上，但它似乎不起作用:

cy.get('.menu.button.overlay_button.projects_popover').click(),
cy.contains('Automation').trigger('mousedown'),
cy.contains('Shots').trigger('mousedown').click()

cypress 有悬停选项吗？

我先点击元素，然后转到自动化，然后点击镜头。

另外，我不认为柏树中有悬停的东西。我想将鼠标放在那个“自动化”选项卡上。我可以点击它，但我不能像 selenium 那样悬停。请帮忙

Answer 1

不，Cypress 目前没有hover() 命令。然而，这可能会在未来添加。

浏览器中有两种不同形式的悬停代码:

1) css 样式通过 :hover 伪类
2) javascript 通过 mouseover/mouseout 事件监听器。

如果您的应用使用#1(css)，cypress 目前无法对其进行测试，因为它无法通过 javascript 解析伪 css 样式。

如果您的应用使用#2(javascript 事件)，您可以使用变通方法，手动触发mouseover/mouseout 事件:

cy.get('.menu.button.overlay_button.projects_popover').click(),
cy.contains('Automation').trigger('mouseover'),
cy.contains('Shots').trigger('mouseover').click()

您的应用也有可能正在监听 mouseenter/mouseleave 事件，在这种情况下您也可以触发这些事件。