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
Comments
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, |
@FraKraBa Thanks for the reproducible example and digging in to the cause. Reproducible Example
<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>
it('works', () => {
cy.visit('index.html');
cy.get('#button').should('be.visible');
}) |
The code for this is done in cypress-io/cypress#15666, but has yet to be released. |
Released in v7.0.0 |
Sweet, thank you @FraKraBa and Cypress Team |
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:
Here is the screenshot of the failing test:

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
The text was updated successfully, but these errors were encountered: