Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside #4395

freewind · 2019-06-05T17:56:36Z

I found should('be.visible') gives wrong result sometimes (even in latest version). I finally made a simple demo to reproduce it:

index.html

<html>
<head>
    <style>
        #main {
            border: 3px solid red;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }

        #outside {
            position: absolute;
            left: 300px;
            border: 3px solid blue;
            width: 100px;
            height: 100px;
        }

        #hello {
            border: 3px solid green;
        }

    </style>
</head>
<body>
<div id="main">
    Main (overflow:hidden)
    <div id="outside">
        Outside (position:absolute)
        <span id="hello">Hello</span>
    </div>
</div>
</body>
</html>

hello_spec.ts

describe('cypress', () => {

  it('test visible correctly', () => {
    cy.visit('index.html');
    cy.get('#hello').should('be.visible');
  });

})

A complete small demo: https://github.com/freewind-demos/typescript-cypress-check-visibility-issue-demo

The problem is on this line of code:

(In function elIsOutOfBoundsOfAncestorsOverflow)

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2019-06-07T16:34:52Z

This is actually a duplicate of #755, but I will leave this issue open since the repro is so simple and comparable to our other tests.

Here is the line of code you are referring to: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/visibility.js#L203

Here are the tests for this logic, which I think are fairly self explanatory: https://github.com/cypress-io/cypress/blob/develop/packages/driver/test/cypress/integration/dom/visibility_spec.coffee#L3

We run our packages/driver tests within Cypress itself - To run the tests:

within cypress root, run npm i
cd to cypress/packages/runner and run npm watch
cd to cypress/packages/driver and run cypress open
click on the visibility_spec to run it within Cypress

… position absolute element. Addresses #4395

jennifer-shehane · 2019-06-10T08:21:53Z

@freewind This failing test case is now a part of #4421

freewind · 2019-06-11T05:23:31Z

@jennifer-shehane Thanks so much for the quick work

…r positioning attributes close #4395 close #755

cypress-bot · 2019-06-19T08:21:43Z

The code for this is done in cypress-io/cypress#4421, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

* Add failing test case for visible element within overflow hidden then position absolute element. Addresses #4395 * Write failing test case for when parent is flex and overflow hidden with el outside bounds Addresses #4161 * Wrote failing test for visibility outside of clip-path Addresses #1178 * Add failing tests for transform scale Addresses #723 * Add failing test for backfact-visibility hidden example * cs -> js fixes * Add more specific error when el is not element * Always return as visible when checking html or body * Add comments + rename methods to be more exact * Add case for isHidden when visibility is collapse * Add failing test cases for visibility issues * Add comment about how ensureVisibility works under the hood * Add checks and tests for opacity: 0 to be hidden * Simplify if/case statements to be more readable * Expand check for offset parents to also check children of ancestor for positioning attributes close #4395 close #755 * Fix issue where els with parents with absolute position inside overflow hidden would be calculated as not visible * comment out opacity checks for patch release * Add more tests around new visibility assertions - Add case to make sure display none is not on the option or optgroup itself * Fix failing assertion - where el was undefined when looking for visibiliyt * remove commented out code involving opacity 😬

cypress-bot · 2019-06-27T23:32:12Z

Released in 3.3.2.

Pieras2 · 2022-02-06T13:33:15Z

What was the cypress ver. for this bug?
I have such an issue on version 7.5.0.
Cypress states that parent object has overflow:hidden and relative size i 0
My element is a button, but it was not the only item for which 'be.visible' failed.

jennifer-shehane mentioned this issue Jun 7, 2019

Visibility overflow detection doesn't work as expected when a child element has position:absolute #755

Closed

cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Jun 7, 2019

jennifer-shehane added type: bug topic: visibility 👁 pkg/driver This is due to an issue in the packages/driver directory good first issue Good for newcomers labels Jun 7, 2019

jennifer-shehane changed the title ~~Cypress fails when use should('be.visible') on a visible element.~~ Cypress fails when use should('be.visible') on a visible element - overflow hidden with position absolute outside Jun 10, 2019

jennifer-shehane mentioned this issue Jun 10, 2019

Element visibility fixes #1242

Closed

15 tasks

jennifer-shehane added a commit that referenced this issue Jun 10, 2019

Add failing test case for visible element within overflow hidden then…

76859ab

… position absolute element. Addresses #4395

jennifer-shehane mentioned this issue Jun 10, 2019

Address some visibility issues #4421

Merged

cypress-bot bot added stage: work in progress and removed stage: ready for work The issue is reproducible and in scope labels Jun 10, 2019

jennifer-shehane added a commit that referenced this issue Jun 17, 2019

Expand check for offset parents to also check children of ancestor fo…

ded5e9f

…r positioning attributes close #4395 close #755

cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: work in progress stage: needs review The PR code is done & tested, needs review labels Jun 17, 2019

jennifer-shehane closed this as completed in #4421 Jun 19, 2019

cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Jun 19, 2019

cypress-bot bot removed the stage: pending release label Jun 27, 2019

aswathkk mentioned this issue Nov 30, 2021

fix: long dropdown popup truncates items appsmithorg/appsmith#9187

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside #4395

Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside #4395

freewind commented Jun 5, 2019 •

edited by jennifer-shehane

Loading

jennifer-shehane commented Jun 7, 2019

jennifer-shehane commented Jun 10, 2019

freewind commented Jun 11, 2019

cypress-bot bot commented Jun 19, 2019

cypress-bot bot commented Jun 27, 2019

Pieras2 commented Feb 6, 2022

Cypress fails when use should('be.visible') on a visible element - overflow hidden with position absolute outside #4395

Cypress fails when use should('be.visible') on a visible element - overflow hidden with position absolute outside #4395

Comments

freewind commented Jun 5, 2019 • edited by jennifer-shehane Loading

jennifer-shehane commented Jun 7, 2019

jennifer-shehane commented Jun 10, 2019

freewind commented Jun 11, 2019

cypress-bot bot commented Jun 19, 2019

cypress-bot bot commented Jun 27, 2019

Pieras2 commented Feb 6, 2022

Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside #4395

Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside #4395

freewind commented Jun 5, 2019 •

edited by jennifer-shehane

Loading