Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
freewind opened this issue Jun 5, 2019 · 4 comments

Comments

2 participants
@freewind
Copy link

commented Jun 5, 2019

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');
  });

})

image

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

The problem is on this line of code:

image

(In function elIsOutOfBoundsOfAncestorsOverflow)

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

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

@jennifer-shehane 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 jennifer-shehane referenced this issue Jun 10, 2019

Open

Element visibility fixes #1242

2 of 9 tasks complete

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

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

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

@freewind

This comment has been minimized.

Copy link
Author

commented Jun 11, 2019

@jennifer-shehane Thanks so much for the quick work

@cypress-bot

This comment has been minimized.

Copy link

commented Jun 19, 2019

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.

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

Address some visibility issues (#4421)
* 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 😬
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.