Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside
See original GitHub issueI found should('be.visible')
gives wrong result sometimes (even in latest version). I finally made a simple demo to reproduce it:
index.html
<html>
<head>
<style>
#main {
border: 3px solid red;
width: 200px;
height: 200px;
overflow: hidden;
}
#outside {
position: absolute;
left: 300px;
border: 3px solid blue;
width: 100px;
height: 100px;
}
#hello {
border: 3px solid green;
}
</style>
</head>
<body>
<div id="main">
Main (overflow:hidden)
<div id="outside">
Outside (position:absolute)
<span id="hello">Hello</span>
</div>
</div>
</body>
</html>
hello_spec.ts
describe('cypress', () => {
it('test visible correctly', () => {
cy.visit('index.html');
cy.get('#hello').should('be.visible');
});
})
A complete small demo: https://github.com/freewind-demos/typescript-cypress-check-visibility-issue-demo
The problem is on this line of code:
(In function elIsOutOfBoundsOfAncestorsOverflow
)
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Interacting with Elements
Scroll the element into view. · Ensure the element is not hidden. · Ensure the element is not disabled. · Ensure the element...
Read more >Debug the Element Visibility Problems in Cypress
Cypress fails the test when the clearly visible "Cypress is amazing!" element is deemed NOT to be visible.
Read more >Access element whose parent is hidden - cypress.io
But the code that I am working with requires me to click on an element whose parent is hidden, while the element itself...
Read more >Interacting with Elements - cypress
In this tutorial we will see how Cypress calculates visibility, how it ensures that elements are actionable, how it deals with the animation ......
Read more >Overflow: hidden
Set Overflow to hidden to prevent unwanted horizontal scrolling and extra whitespace in your project when elements exist outside the viewport.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
What was the cypress ver. for this bug? I have such an issue on version 7.5.0. Cypress states that parent object has overflow:hidden and relative size i 0 My element is a button, but it was not the only item for which ‘be.visible’ failed.
Released in
3.3.2
.