vitaliy4us
vitaliy4us

Reputation: 595

How to overcome hover issue in Cypress?

I faced Cypress hover problem regarding access to a sub menu appearing after hovering on main menu item. The error is This element is not visible because it has CSS property: position: fixed and it's being covered by another element:. I tried to use workarounds recommended by Cypress https://docs.cypress.io/api/commands/hover#Workarounds but did not succeed. Cypress documentation says "Using .trigger() will only affect events in JavaScript and will not trigger any effects in CSS", so I tried to change CSS property of the element at first and then use .trigger command:

        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('attr', 'style', 'position: absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).should('have.attr', 'style', 'position: absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('show');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).trigger('mouseover');

but it did not work. Regardless I have confirmation expected <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> to have attribute style with the value **position: absolute** I have the same error on the final step This element <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> is not visible because it has CSS property: **position: fixed** and it's being covered by another element:. How can I access the hidden submenu without using { force: true } argument?

Upvotes: 2

Views: 10116

Answers (2)

Sarfaraz Khan
Sarfaraz Khan

Reputation: 1

I was facing the same problem like that but u can resolve(works for me) it, see the below steps.

  1. install cypress-real-events -> npm i cypress-real-events or npm i cypress-real-events --f.
  2. import this statement -> import "cypress-real-events"; into your commands.js or index.js whichever u have in under your support folder.
  3. Now use it like this -> cy.get(".cssmenu > :nth-child(1)").realHover();

Hope this will help u guys.

Upvotes: 0

user16695029
user16695029

Reputation: 4430

Something might be wrong with the selector, since you set position: absolute and confirm it, yet the message still references position: fixed.

Assuming the selector is ok, you might be able to trigger the "show" effect with .realHover() from cypress-real-events.

It uses Chrome Devtools Protocol to automate the chrome devtools (only for chrome browser).

Upvotes: 5

Related Questions