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

'visible' assertion says visible for elements cropped by parent element with overflow: hidden #4161

Closed
mvasin opened this issue May 8, 2019 · 5 comments

Comments

3 participants
@mvasin
Copy link

commented May 8, 2019

Current behavior:

Cypress claims an element is visible, while it's completely cropped by parent overflow: hidden container element.

Here's html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      overflow: hidden;
    }
    div {
      flex: 0 0 80%;
    }

    [data-cy=red] {
      background-color: red;
    }

    [data-cy=green] {
      background-color: green;
    }

    [data-cy=blue] {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div data-cy="red">red</div>
    <div data-cy="green">green</div>
    <div data-cy="blue">blue</div>
  </div>
</body>
</html>

Here's the test:

/// <reference types="Cypress" />

describe('Smoke test', () => {
  it('отображает футер', () => {
    cy.visit('http://localhost:8080')
    cy.get('[data-cy="red"]').should('be.visible')
    cy.get('[data-cy="green"]').should('be.visible')
    cy.get('[data-cy="blue"]').should('not.be.visible')
  })
})

All three divs, red, green and blue are 80% of the parent, parent div is overflow: hidden, there is no way for a user to scroll to blue div:
Screenshot from 2019-05-08 16-32-54

But Cypress somehow scrolls to that div and thinks it's visible:
Screenshot from 2019-05-08 16-33-11

Desired behavior:

Above code should be enough, but just in case, here's the reproduction repo: https://github.com/mvasin/cypress-visible-bug

Versions

Cypress 3.2.0, Ubuntu 18.04.2 LTS, Electron 59 or Chrome 74

@speir-wang

This comment has been minimized.

Copy link

commented May 13, 2019

I am having the same issue. In my case, the react-select dropdown menu is being cropped from the view, technically speaking, we can see part of the dropdown, but the shoud(be.visible) is not happy with it :(

@jennifer-shehane jennifer-shehane changed the title 'visible' assertion doesn't work as expected for elements cropped by parent element 'visible' assertion says visible for elements cropped by parent element with overflow: hidden May 14, 2019

@jennifer-shehane

This comment was marked as outdated.

Copy link
Member

commented May 14, 2019

May be related to this issue: #683

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

What is additionally weird is that when you go to hover to see the snapshot, the blue div does appear in the snapshot.

Screen Shot 2019-06-10 at 3 06 49 PM

I've written a failing test for this within #4421

@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 😬
@cypress-bot

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.