Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cypress hover over the menu option called "Automation"

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.

enter image description here

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

like image 273
user10751590 Avatar asked Mar 10 '19 18:03

user10751590


People also ask

How do you mouse hover and click in Cypress?

This is done by passing an option as an argument to the click() command in Cypress. click({ force: true }) − The click() command with the option force set to true [force:true ] modifies the default behavior of the hidden element and we can click on it.

How do you do mouse actions in Cypress?

Cypress Click Command In case you want to perform a Cypress mouse event like click, you can use the . click() method offered by the Cypress framework. It lets you click on any DOM element.

What is a hover button?

Alternatively referred to as mouseover or mouse hover, hover describes the act of moving a mouse pointer over a clickable object, but not actually clicking the left or right mouse button. For example, when you hover your mouse over any of the links on this page, they should change color, indicating they can be clicked.


Video Answer


1 Answers

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.

like image 166
bkucera Avatar answered Sep 30 '22 12:09

bkucera