How to hover over elements in Cypress

Last updated on Mar 15, 2023 by Suraj Sharma

In this tutorial, you will learn how you can hover over elements using the trigger() function with the mouseover event in Cypress

Here's an example of how you can hover over an element with Cypress:

  // Get the element you want to hover over
  const element = cy.get('.cls');

  // Use the trigger() command to hover over the element with the mouseover event

You can also chain other commands after hovering over an element, such as clicking on a sub-element that appears on hover.

Here's an example:

// Get the parent element and the sub-element that appears on hover
const parentElement = cy.get('.parent');
const subElement = cy.get('.child');


// Chain a click command to click on the sub-element that appears on hover;

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.