Skip to main content
Cypress应用

hover

danger

Cypress 没有 cy.hover() 命令。请参阅 Issue #10。

如果使用了 cy.hover()，将会显示错误并跳转到本页面。

解决方案​

有时元素在悬停时有特定逻辑，你确实需要在 Cypress 中模拟"悬停"。可能元素在悬停到另一个元素之前甚至不会显示为可点击状态。

通常你可以使用 .trigger()、 .invoke() 或 cy.wrap() 来在执行操作前显示元素。

info

查看我们关于测试悬停和处理隐藏元素的示例配方。 也可以看看 cypress-real-events 插件，它提供了在 Chromium 浏览器中的原生事件如悬停和滑动。

Trigger​

如果悬停行为依赖于 JavaScript 事件如 mouseover，你可以触发该事件来实现该行为。

danger

使用 .trigger() 只会影响 JavaScript 中的事件，不会触发 CSS 中的任何效果。

作为解决方案，可以查看 利用 Chrome 远程调试的配方 来设置如 hover 这样的伪类。

模拟 mouseover 事件使弹出框显示​

cy.get('.menu-item').trigger('mouseover')
cy.get('.popover').should('be.visible')

Invoke​

显示元素以执行操作的示例​

cy.get('.hidden').invoke('show').click()

强制点击​

你也可以强制对元素执行操作，无论元素是否可见。

点击隐藏元素的示例​

cy.get('.hidden').click({ force: true })

勾选隐藏元素的示例​

cy.get('.checkbox').check({ force: true })

添加为自定义命令​

尽管 Cypress 没有内置的 cy.hover() 命令，但你可以使用 Cypress.Commands.add() 创建自己的自定义命令。

Cypress.Commands.add('hover', (...args) => {})

请注意，虽然 Cypress.Commands.add() 是自 Cypress 10.0 以来推荐的定义自定义 cy.hover() 命令的方式， Cypress.Commands.overwrite() 仍然有效。

Cypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})

另请参阅​

我们在视频 Cypress hover 示例 中展示了如何使用 .trigger 命令和 cypress-real-events 插件来测试具有悬停状态的元素，源代码可在 bahmutov/cy-hover-example 仓库中找到。

目录