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 button in a sticky element in a modal is detected as not visible #14938

Closed
FraKraBa opened this issue Feb 5, 2021 · 5 comments · Fixed by #15666
Closed

visible button in a sticky element in a modal is detected as not visible #14938

FraKraBa opened this issue Feb 5, 2021 · 5 comments · Fixed by #15666

Comments

@FraKraBa
Copy link

FraKraBa commented Feb 5, 2021

Current behavior

I have a button inside a sticky element in a modal. Behind the modal is a scrollable element which is an ancestor of the modal. Cypress thinks that the button is not visible. I get the following error message:

This element <button#button> is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: hidden, scroll or auto

Here is the screenshot of the failing test:
page -- works (failed)

Desired behavior

I can see the button. Cypress should recognize that it is visible.

Test code to reproduce

I have a simple example which reproduces this error. You can find it here:
https://github.com/FraKraBa/cypress-test-tiny

Versions

Cypress 6.4.0

@FraKraBa
Copy link
Author

FraKraBa commented Feb 5, 2021

I debugged a little bit and found the following suspicious function:

const elOrAncestorIsFixed = function ($el) {
    const $stickyOrFixedEl = $elements.getFirstFixedOrStickyPositionParent($el);

    if ($stickyOrFixedEl) {
       return $stickyOrFixedEl.css('position') === 'fixed'; // we are sticky => returns false
    }
};

In the case presented the button is inside a sticky element. Thus, elOrAncestorIsFixed returns false. Afterwards elIsOutOfBoundsOfAncestorsOverflow is called and tells that the button is not inside its ancestor Details which has overflow:scroll. However, between the button and Details is the modal which hat the property position:fixed.

@jennifer-shehane jennifer-shehane added topic: visibility 👁 stage: ready for work The issue is reproducible and in scope labels Feb 8, 2021
@jennifer-shehane
Copy link
Member

@FraKraBa Thanks for the reproducible example and digging in to the cause.

Reproducible Example

index.html

<html>
<body>
  <div id="parent" style="display:flex; height: 90vh;">
    <div id="Preselect" style="flex:1; background-color:aquamarine; height: 100%;">
      Preselect
    </div>
    <div id="Details" style="flex:1; background-color:blue; height: 100%; overflow:scroll;">
      Details
      <div id="modal" style="background-color: chartreuse; height: 80vh; width: 90%; position: fixed; display: block; left:5%; top:5%;">
        <div id="sticky" style="background-color: darkgray; position:sticky; bottom: 10%; width:9%; height:10%;">
          <button id="button" style="background-color: darkred; color:white;">
            click me
          </button>
          <div id="message"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  const btn = document.getElementById('button')
  const msg = document.getElementById('message')

  btn.onclick = (e) => {
    msg.innerHTML = 'Success!'
  }
</script>

</html>

spec.js

it('works', () => {
  cy.visit('index.html');
  cy.get('#button').should('be.visible');
})

@cypress-bot cypress-bot bot added stage: work in progress There is an open PR for this issue [WIP] and removed stage: ready for work The issue is reproducible and in scope labels Mar 26, 2021
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Apr 1, 2021

The code for this is done in cypress-io/cypress#15666, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot cypress-bot bot removed the stage: work in progress There is an open PR for this issue [WIP] label Apr 1, 2021
@bahmutov
Copy link
Contributor

bahmutov commented Apr 7, 2021

Released in v7.0.0

@TekSiDoT
Copy link

TekSiDoT commented Apr 8, 2021

Sweet, thank you @FraKraBa and Cypress Team

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Apr 28, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants