Skip to main content

hover

danger

Cypress does not have a cy.hover() command. See Issue #10.

If cy.hover() is used, an error will display and redirect you to this page.

Workarounds​

Sometimes an element has specific logic on hover and you do need to "hover" in Cypress. Maybe the element doesn't even display to be clickable until you hover over another element.

Oftentimes you can use .trigger(), .invoke() or cy.wrap() to show the element before you perform the action.

info

Check out our example recipe on testing hover and working with hidden elements. Also take a look at the cypress-real-events plugin that provides native events like hover and swipe in Chromium browsers.

Trigger​

If the hover behavior depends on a JavaScript event like mouseover, you can trigger the event to achieve that behavior.

danger

Using .trigger() will only affect events in JavaScript and will not trigger any effects in CSS.

As a workaround, check out the recipe leveraging Chrome remote debugging to set pseudo classes like hover.

Simulating mouseover event to get popover to display​

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

Invoke​

Example of showing an element in order to perform action​

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

Force click​

You can also force the action to be performed on the element regardless of whether the element is visible or not.

Example of clicking on a hidden element​

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

Example of checking a hidden element​

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

Add as a custom command​

Although Cypress does not have a built-in cy.hover() command, you can create your own custom command using Cypress.Commands.add().

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

Note that while Cypress.Commands.add() is the recommended way to define a custom cy.hover() command since Cypress 10.0, Cypress.Commands.overwrite() will still work.

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

See also​

We show how to use the .trigger command and the cypress-real-events plugin to test elements with hover states in the video Cypress hover example, with the source code available in the bahmutov/cy-hover-example repo.