cypress
cypress copied to clipboard
cypress-io
Child is visible with Parent max-height: 0 and overflow: clip
Current behavior
If the parent has max-height: 0 and overflow: hidden/clip cypress interprets the child as visible.
Desired behavior
As the Element is hidden and never can be visible to the user the check '.should('not.be.visible')' should be truthy
Test code to reproduce
<div style="max-height: 0; overflow: clip;">
<div data-cy="not-visible">
I should not be visible
</div>
</div>
cy.get('[data-cy="not-visible"]').should('not.be.visible');
Cypress Version
10.8.0
Node version
16.15.1
Operating System
Windows 10
Debug Logs
No response
Other
No response
With the given html, the div is visible to the human eye:
I believe that's because overflow: 'hidden' (with quotes around hidden) is not valid CSS.
Changing it to overflow: hidden (without quotes) causes it not be visible, but then the assertion .should('not.be.visible') also passes.
Can you verify the assertion still fails for you if it's overflow: hidden?
Oh sry i have rewritten it wrong out of my react example app and in addition i had the wrong state of the code.
Actually it is overflow:clip.
This is the actual rendered in the iframe by cypress (without quotes):
<body>
<div id="root"><div style="max-height: 0px; overflow: clip;"><div id="hidden">I am not visible</div></div></div>
<script type="module" src="/src/main.jsx"></script>
</body>
And this is displayed
Thanks for the quick reply.
I verified it's not working correctly with overflow: clip. I'll route this to a team to look into a fix.