如何使用赛普拉斯测试'HOVER'(.trigger('mouseover') 不起作用)

Question

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

例如，当你去易趣时(https://www.ebay.com)，您将在页面右上角看到警报图标，如果您将鼠标悬停在该元素上，则会显示登录通知框。

这是我的代码，我按照Cypress告诉我的操作，但我得到了一个错误，比如。。。

断言错误重试超时：应查找元素：#ghn错误，但从未找到。

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

对我来说，鼠标悬停是有效的。这是一个已知的Cypress错误，有待解决。但是，试试这些：

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事件切换类。