How to Hover on Elements in Cypress

How to Hover on Elements in Cypress

Ferenc Almasi β€’ 2021 October 15 β€’ Read time 1 min read
  • twitter
  • facebook

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

Triggering mouse over events

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

Copied to clipboard!
cy.get('nav').trigger('mouseover');

Forcing show

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

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

Using custom commands

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:

Copied to clipboard! Playground
// 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:

Learn Cypress with Educative
How to Hover on Elements in Cypress
If you would like to see more webtips, follow @flowforfrank

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.