javascript - How to overcome hover issue in Cypress? - Stack Overflow

admin管理员组

文章数量:1405365

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 remended by Cypress 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 mand:

        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?

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 remended by Cypress https://docs.cypress.io/api/mands/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 mand:

        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?

• javascript
• jquery
• css
• cypress

Share Improve this question Follow asked Aug 24, 2021 at 8:17 vitaliy4usvitaliy4us 60711 gold badge99 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

本文标签： javascriptHow to overcome hover issue in CypressStack Overflow