How to Hover on Elements in Cypress

Although Cypress does not support officially a cy.hover command, there is some workaround that may work for your specific case.

One way is to trigger a mouseover event using the trigger command:

cy.get('nav').trigger('mouseover');

If using the mouseover event does not work, you can also try to force showing the element:

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

Lastly, you can also try using the rightclick command, with the combination of defining it as a new custom command. You can of course do this for the above two workarounds too:

// Define in your `support/commands.js`
Cypress.Commands.add('hover', selector => {
    cy.get(selector).rightclick();
});

// Later in your tests you can call:
cy.get('nav').hover();

Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Official docs on workarounds for hover functionality