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?

Answer

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).

Advertisement

Answer