Cypress hover over the menu option called "Automation"

Question

I am trying to hover over the menu option(shots - it is under automation tab) by using this below command however it does not seem to work:

cy.get('.menu.button.overlay_button.projects_popover').click(),
cy.contains('Automation').trigger('mousedown'),
cy.contains('Shots').trigger('mousedown').click()

Does cypress have the hover option?

I am click on the projects first, then going to Automation and then click on shots.

also, i do not think if there is any thing as hover in cypress. I want to place my mouse on that"Automation" tab. I am able to click it but i cannot do hover like selenium. Please help

Answer 1

No, Cypress does not currently have a hover() command. However this will probably be added in the future.

There are two different forms of hover code in the browser:

1) css styling via a :hover pseudo class
2) javascript via mouseover/mouseout event listeners.

If your app uses #1(css), cypress cannot currently test that because it cannot parse pseudo css styles via javascript.

If your app uses #2(javascript events), you can use a workaround, triggering the mouseover/mouseout events manually:

cy.get('.menu.button.overlay_button.projects_popover').click(),
cy.contains('Automation').trigger('mouseover'),
cy.contains('Shots').trigger('mouseover').click()

There is also a possibility your app is listening to the mouseenter/mouseleave events, in which case you can trigger those as well.