question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cypress fails when use `should('be.visible')` on a visible element - overflow hidden with position absolute outside

See original GitHub issue

I 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');
  });

})

image

A complete small demo: https://github.com/freewind-demos/typescript-cypress-check-visibility-issue-demo

The problem is on this line of code:

image

(In function elIsOutOfBoundsOfAncestorsOverflow)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Pieras2commented, Feb 6, 2022

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.

0reactions
cypress-bot[bot]commented, Jun 27, 2019

Released in 3.3.2.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found