如何使用 Cypress 测试“HOVER”（.trigger('mouseover') 不起作用）

Question

我想知道是否可以使用 Cypress 测试可覆盖的下拉菜单栏。

例如，当您访问 Ebay(https://www.ebay.com) 时，您会在页面右上角看到警报图标，如果您将鼠标悬停在该元素上，则登录将会出现通知框。

这是我的代码，我按照赛普拉斯告诉我的去做，但我收到了一个错误，例如...

断言错误 超时重试：期望找到元素：#ghn-err，但从未找到。

 it('ebay hover test', () => {
        cy.visit('https://www.ebay.com')
        // 1. alert icon hover test.
        cy.get('#gh-Alerts-i').trigger('mouseover')
        cy.get('#ghn-err').should('be.visible')
        // 2. This is my another test.
        // cy.get('#gh-eb-My > .gh-menu > .gh-eb-li-a > .gh-sprRetina').trigger('mouseover')
        //cy.get('#gh-eb-My-o > .gh-eb-oa thrd').should('be.visible')
    })

Answer 1

对我来说，鼠标悬停有效。这是一个已知的赛普拉斯错误，有待解决。 不过，请尝试这些：

cy.get('#gh-Alerts-i').trigger('onmouseover')
cy.get('#gh-Alerts-i').trigger('mouseenter')
cy.get('#gh-Alerts-i').invoke('trigger', 'contextmenu')
cy.get('#gh-Alerts-i').rightclick();

Answer 2

我遇到了同样的问题，我终于找到了这个插件，它完全符合我的要求：执行真实事件而不是模拟事件（模拟==用javascript启动）。

https://github.com/dmtrKovalenko/cypress-real-events#cyrealhover

只需安装它，在

cypress/support/index.js

文件中添加一行（不要忘记！请参阅页面顶部的“安装”段落）并使用

cy.get(<element>).realHover()

。

Answer 3

如果

.trigger()

不适合您，也可能是您的显示逻辑是通过 CSS 控制的（例如使用

.class:hover

）。然后，您可以重新设计显示逻辑，以使用

mouseenter

和

mouseleave

事件来切换类。

Answer 4

我前段时间也遇到过同样的问题： cy.get('myElementLocator').rightclick(); 为我工作