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.

Sign up for GitHub

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

Jump to bottom

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

Closed
mvasin opened this issue May 8, 2019 · 5 comments · Fixed by #4421
Closed

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

mvasin opened this issue May 8, 2019 · 5 comments · Fixed by #4421
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug

Comments

@mvasin
Copy link

mvasin commented May 8, 2019 •
edited by jennifer-shehane
Loading

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
Copy link

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 has been minimized.

Sign in to view
@jennifer-shehane jennifer-shehane added type: bug pkg/driver This is due to an issue in the packages/driver directory labels May 14, 2019
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label May 14, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Jun 10, 2019
Closed
15 tasks
@jennifer-shehane
Copy link
Member

jennifer-shehane commented Jun 10, 2019 •
edited
Loading

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

jennifer-shehane added a commit that referenced this issue Jun 10, 2019
@jennifer-shehane
Write failing test case for when parent is flex and overflow hidden w…
af3eced 
…ith el outside bounds

Addresses #4161
@jennifer-shehane jennifer-shehane mentioned this issue Jun 17, 2019
Merged
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: ready for work The issue is reproducible and in scope stage: needs review The PR code is done & tested, needs review stage: work in progress labels Jun 17, 2019
@cypress-bot 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
Copy link
Contributor

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
@jennifer-shehane
Address some visibility issues (#4421)
e2205f9 
* 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
Contributor

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
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Address some visibility issues cypress-io/cypress
3 participants
@jennifer-shehane @speir-wang @mvasin