visible button in a sticky element in a modal is detected as not visible #14938
Labels
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, |
jennifer-shehane
added
topic: visibility 👁
stage: ready for work
|
@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');
}) |
cypress-bot
bot
added
stage: work in progress
|
The code for this is done in cypress-io/cypress#15666, but has yet to be released. |
cypress-bot
bot
removed
the
stage: work in progress
|
Released in v7.0.0 |
|
Sweet, thank you @FraKraBa and Cypress Team |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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: