Cypress: cy.get Element is determined as not visible

[shinobi64]

Current behavior:

cy.get retrieves an element but states it's not visible.

html construct is as follows:

<div id="static" style="height: 0px; width: 0px; overflow: hidden; float: left;">
  <div id="popover" style="position:absolute; visibility:visible;-index:10;display:block;top:82px;right:0px;min-width:6.25rem;min-height:2rem;">
    <button id="myButton" style="width:100% !important; height:2rem">ButtonText</button>
  </div>
</div>

Log from cypress: This element is not visible because its parent <div#static> has CSS property: 'overflow:hidden' and an effective width and height of '0 x 0' pixels.

However if you use the DOM inspector from the browser you see the element actually has a width and height - as the intermediate div element with the position absolute and visible property seems to override the parent entries.

Desired behavior:

As the element is visible in the browser - cypress should treat it as visible too.

Steps to reproduce:

Versions

Cypress: 3.1.0
Mac OS X 10.13.6
Browser: Electron 59

[jennifer-shehane]

Duplicate of https://github.com/cypress-io/cypress/issues/695

[shinobi64]

@jennifer-shehane I don't think the duplicate reference matches the issue here. I did some more investigation and it seems the calculation issue "only" occurs in case the application is embedded inside the cypress test runner (independently of using electron or chrome)

DOM inspector of application running in Cypress (with Chrome)

DOM inspector of application running solely in Chrome

The DOM structure (of the application) seems to be the same but still the engine of Chrome seems to come to different height results in both cases. Beneath the div marked there are other divs included which have the position:absolute directive, which extracts them from the current layout. Eventually the Cypress algorithm should stop seeking for parents in case it encounters a position:absolute element along the chain?

Chrome: Version 70.0.3538.77 (Official Build) (64-bit)
Mac OS X: 10.14.1
Cypress: 3.1.1

[robrien1]

This is not a duplicate. We confirmed this reported behavior and believe this issue will proliferate rapidly. Request this issue be taken seriously please.

[jennifer-shehane]

@shinobi64 From the screenshots, it doesn't look like the Dom is rendering the same at all within Cypress and outside of Cypress.

DOM in Cypress photo:

DOM in non-Cypress photo:

It looks to me like the CSS is rendering differently within your Cypress tests as opposed to outside of Cypress tests, there could be many different reasons for this:

1. You have blacklistHosts to block a domain that is responsible for loading css resources
2. The CSS is rendering differently because the application has media queries that make it render differently at different sizes.

There's something happening when running in Cypress that is causing the CSS to not load. There are 1,000 variables involved here, so we need a reproducible example to be able to narrow the issue down to Cypress and fix it.

Please comment in this issue with a reproducible example that we can run exactly on our machines and we will reopen the issue. 🙏

[robrien1]

Hi Jennifer,

After quite some time trying to determine the core issue we found that our checkbox that had a CSS Zoom of 1.2 caused the issue.

We are now looking to determine the best way to work around this.

Any feedback would be welcome.

Thank again for the quick response.

Richard O’Brien

Senior Web Developer

Commercial Apps Team

SomaLogic, LLC

Building West

[phone] mobile

From: Jennifer Shehane [e-mail]
Reply-To: cypress-io/cypress [e-mail]
Date: Thursday, September 19, 2019 at 2:53 PM
To: cypress-io/cypress [e-mail]
Cc: Richard O'Brien , Comment [e-mail]
Subject: Re: [cypress-io/cypress] cy.get Element is determined as not visible (#2428)

@shinobi64 From the screenshots, it doesn't look like the Dom is rendering the same at all within Cypress and outside of Cypress.

DOM in Cypress photo:

DOM in non-Cypress photo:

It looks to me like the CSS is rendering differently within your Cypress tests as opposed to outside of Cypress tests, there could be many different reasons for this:
You have blacklistHosts to block a domain that is responsible for loading css resources
The CSS is rendering differently because the application has media queries that make it render differently at different sizes.
There's something happening when running in Cypress that is causing the CSS to not load. There are 1,000 variables involved here, so we need a reproducible example to be able to narrow the issue down to Cypress and fix it.

Please comment in this issue with a reproducible example that we can run exactly on our machines and we will reopen the issue. 🙏

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

This email has been scanned for spam and viruses by Proofpoint Essentials. Click here to report this email as spam.