![](/img/trans.png)
[英]Background image disappears on hover/mouseover and menu doesn't work in IE
[英]How to test 'HOVER' using Cypress(.trigger('mouseover') doesn't work)
我想知道是否可以使用赛普拉斯测试可覆盖的下拉菜单栏。
For example, when you go to Ebay( https://www.ebay.com ), you'll see the alert icon at the top-right corner of the page and if you hover on that element, sign-in notification box will出现。
这是我的代码,我按照赛普拉斯告诉我的操作,但我得到了一个错误,比如......
AssertionError 重试超时:应找到元素:#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')
})
对我来说,鼠标悬停有效。 这是一个有待解决的已知 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();
我遇到了同样的问题,我终于找到了这个插件,它完全符合我的要求:做真实事件而不是模拟事件(模拟 == 使用 javascript 启动)。
https://github.com/dmtrKovalenko/cypress-real-events#cyrealhover
只需安装它,在cypress/support/index.js
文件中添加一行(不要忘记!请参阅页面顶部的“安装”段落)并使用cy.get(<element>).realHover()
。
https://github.com/dmtrKovalenko/cypress-real-events#readme
使用上面的 package,它应该可以工作。
注意:这仅适用于 chrome 浏览器。
如果.trigger()
对您不起作用,也可能是您的显示逻辑是通过 CSS 控制的(例如使用.class:hover
)。 然后,您可以重新设计显示逻辑,以使用mouseenter
和mouseleave
事件来切换 class。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.