hover

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.

Trigger

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

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.