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

[bencao]

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

[brian-mann]

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]

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

[jennifer-shehane]

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]

@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"?

[liuyangcharlie]

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]

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

[jennifer-shehane]

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

[jennifer-shehane]

Closing as duplicate of #4395

[cypress-bot]

Released in 3.3.2.