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 · 5 comments

Comments

@freewind
Copy link

@freewind freewind 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
Copy link
Member

@jennifer-shehane jennifer-shehane 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 added a commit that referenced this issue Jun 10, 2019
… position absolute element.

Addresses #4395
@jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Jun 10, 2019

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

@freewind
Copy link
Author

@freewind freewind commented Jun 11, 2019

@jennifer-shehane Thanks so much for the quick work

@cypress-bot
Copy link

@cypress-bot cypress-bot bot 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
* 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
Copy link

@cypress-bot cypress-bot bot commented Jun 27, 2019

Released in 3.3.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants