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

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

Closed
bencao opened this issue Oct 17, 2017 · 9 comments

Comments

4 participants
@bencao
Copy link

commented Oct 17, 2017

Current behavior:

If an child element which has 'position: absolute' is placed in a parent element which contains 'overflow: hidden', the input elements in the child element will be consider not visible by cypress. But from end user perspective, it is visible and interactable.

Desired behavior:

The visibility detection should consider this case and consider those input elements in a 'position: absolute' child element being visible.

How to reproduce:

Repo created to demonstrate the issue:

https://github.com/bencao/cypress-visibility-detection-issue

A fiddle page which contains the above parent/child elements:

https://jsfiddle.net/benb88/8j89jbzh/3/

Test code:

describe('Visibility', function(){
  it('does not work as intended for the widget example', function() {
    cy.
      visit('https://jsfiddle.net/benb88/8j89jbzh/3/show').
      get('input.budget-input').
        // expect this input to be visible and editable
        // but it reports error saying the content is clipped by one of its parent elements
        type('135');
  });
})
  • Operating System: MacOS 10.12.5
  • Cypress Version: 1.0.2
  • Browser Version: Electron 53

@bencao bencao changed the title Visibility detection did not consider position:absolute case Visibility overflow detection doesn't consider the case when a child element has position:absolute Oct 17, 2017

@brian-mann brian-mann self-assigned this Oct 17, 2017

@brian-mann

This comment has been minimized.

Copy link
Member

commented Oct 17, 2017

Will look into this. We actually take this into account when performing the calculations. Will see what needs to be updated.

Here is the visibility code:
https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/visibility.coffee

And the associated tests:
https://github.com/cypress-io/cypress/blob/develop/packages/driver/test/cypress/integration/dom/visibility_spec.coffee

@bencao bencao changed the title Visibility overflow detection doesn't consider the case when a child element has position:absolute Visibility overflow detection doesn't work as expected when a child element has position:absolute Oct 17, 2017

@bencao

This comment has been minimized.

Copy link
Author

commented Oct 17, 2017

@brian-mann Thanks, I noticed there's a related test case, will read the code to find some clues.

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Oct 17, 2017

There are quite a few issues tagged as 'topic: visibility', it needs a lot of ❤️ . https://github.com/cypress-io/cypress/labels/topic%3A%20visibility

@bencao

This comment has been minimized.

Copy link
Author

commented Oct 17, 2017

@brian-mann I found the logic here a bit confusing:

https://github.com/cypress-io/cypress/blame/develop/packages/driver/src/dom/visibility.coffee#L185

Should the logic be "or" instead of "and"?

@jennifer-shehane jennifer-shehane referenced this issue Jan 31, 2018

Open

Element visibility fixes #1242

2 of 9 tasks complete
@liuyangcharlie

This comment has been minimized.

Copy link

commented Apr 26, 2018

Are there any updates on this issue?
We are meeting the similar problems. The element is actually visible and able to interact, but Cypress just log that it is not visible due to being clipped by one of its parent elements. And all parents elements have no style like 'hidden', 'scroll' or 'auto'.
It is a bit annoying to avoid this case by adding force option. Is there any better idea?
Thx

@brian-mann

This comment has been minimized.

Copy link
Member

commented Apr 26, 2018

@liuyangcharlie do you mind posting a reproducible example - as minimal as possible to show how Cypress incorrectly interprets elements as not visible?

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Apr 24, 2019

Verified, the test case in the original post is still failing in Cypress 3.2.0

@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

Closing as duplicate of #4395

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

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.