How to perform a mouseover (hover) action in Cypress?

General Discussions
#1

How to perform a mouseover (hover) action in Cypress?

#2

You can use the cypress-real-events plugin and this worked with your webpage.

To install use the command:

npm i cypress-real-events Then inside your cypress/support/index.{js,ts}, write:

import “cypress-real-events/support”; And in your code you can directly write:

cy.contains(“a”, “Custom”).realHover(‘mouse’)

Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.

#3

Using the invoke command to trigger mouseenter event:

cy.get(‘your-element-selector’).invoke(‘trigger’, ‘mouseenter’)

This approach uses the invoke command to trigger the mouseenter event on the element, which is equivalent to hovering over the element. This can be useful if you need to trigger additional event listeners associated with mouseenter.

#4

Using Cypress’s trigger command:

cy.get(‘your-element-selector’).trigger(‘mouseover’)

This command triggers a mouseover event on the specified element, simulating a mouse hover action. This is the simplest and most direct way to perform a hover action in Cypress.