When 'is.visible' failure, error shows 'is being covered by another element: undefined'

[anthwinter]

Current behavior:

I am expecting a test to pass on an element that is visible. cy.get(#el).should('be.visible').

When I look at the test in the GUI, I can see that it is visible and has been scrolled to after geting the element. But the 'This element is not visible' icon is showing against the test.

The element I am testing against is a child of a div that has position: fixed. If I remove the position from it, the test passes as expected.

Desired behavior:

The test should pass as the item is visible

How to reproduce:

I have reproduced this bug here: https://github.com/anthwinter/cypress-test-tiny

It uses express, so once you have cloned the repo, run node index.js and head to localhost:3000 before running the test.

• Operating System: macOs 10.13.3
• Cypress Version: 2.0.4
• Browser Version: Chrome 64

[Jazzepi]

This was broken for me as well. The message I got indicated that element Cypress was looking at had position: set to something, but I looked in the chrome inspector and it didn't have position set by a CSS style inline or otherwise. It also happened intermittently which I really don't understand.

[krikke26]

Operating System: macOs 10.11.6
Cypress Version: 3.0.2
Browser Version: Chrome 67

I confirm this problem but with different result. I have a cookie message that I was testing and it has a position fixed (the element itself and not the parent).
When I test a scenario where the cookie message should stay visible the .should('be.visible'); and .should('not.be.visible'); both succeeds.

When I remove position fixed it can properly detect if it is visible or not. But even then, having position fixed succeed both visible and not visible is kinda strange ...

My test is pretty simple:

    it('Should close dialog when click the close icon', () => {
        cy.get('.btn-cookie-readmore').click();
        cy.get('#modal-detailbox .close').click();
        cy.get('#modal-detailbox').should('not.be.visible');
        cy.get('.cookie-consent-box').should('not.be.visible');
    });

[Knaledge]

@bahmutov , @jennifer-shehane - following up on conversation in Gitter (9/17/2018 @ 15:09 CST)

The following encapsulated test will reproduce the issue reported here:

Operating System: macOS 10.13.6 (17G65)
Cypress: 3.1.0
Chrome: 69

context('Finding Elements', function () {
  describe('Inability to find visible elements', function () {
    it("reproduces 'covered by another element: undefined' on public site", function () {
      cy.visit('https://cookieconsent.insites.com/app/themes/insites-cookie-consent/examples/example-4-opt-out.html')
      cy.get('.example-selector').click()
      cy.get('.cc-allow').click()
      cy.get('.cc-banner').should('be.hidden')
      cy.get('.cc-revoke').should('be.visible')
    })
  })
})

Command:   get
cypress_runner.js:139454 Yielded:   <div class=​"cc-revoke cc-bottom cc-animate cc-color-override-1438462623" style>​Cookie Policy​</div>​

cypress_runner.js:139454 Elements:  1
cypress_runner.js:139454 Selector:  .cc-revoke
cypress_runner.js:139454 Error:
     
CypressError: Timed out retrying: expected '<div.cc-revoke.cc-bottom.cc-animate.cc-color-override-1438462623>' to be 'visible'

This element '<div.cc-revoke.cc-bottom.cc-animate.cc-color-override-1438462623>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

undefined

[kud]

Related: #2558

[jennifer-shehane]

@Knaledge Thank you for providing a reproducible example.

[mrmojica]

I'm also getting the same error message (not visible) when testing a full-page modal that does have a position:fixed. When I remove the position the expected element is visible and passes. Hope this gets fixed soon!

[kmichetti]

Same issue, intermittent with electron 59

[andezzat]

I'm having this issue intermittently as well, it's got to do with the element being in one container that's a parent somewhere up the hierarchy.

---

Cypress: 3.2.0
OS: macOS 10.14.2
Browser: Electron 59

[jennifer-shehane]

Response to @AnthW, original post #1379 (comment)

The button element you are asserting on is technically not visible within the viewport. The button would have to be scrolled to in order to be visible.

We do not automatically scroll to elements during the test run. We do however scroll to the element when reviewing the tests that have previously run in order to help with debugging. cy.get() and .find() NEVER scroll anything during the test run. You can see what is actually scrolling during the test run by placing .pause() in your tests and seeing each command execute. Some of this is noted in our docs here: https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Scrolling

This is not a bug. This is expected behavior and the only way we can support testing scrolling behavior + visibility.

To test that the button is visible, you would need to write:

describe('Button', () => {
  it('should be visible', () => {
    cy.viewport(640, 480)
    cy.visit('index.html')
    cy.get('#buttonElement')
      .scrollIntoView()
      .should('be.visible')
  })
})

As for the error message indicating is being covered by another element: undefined - this is a bug, it shouldn't log undefined here.

Response to @Knaledge #1379 (comment)

Unfortunately, the url in your provided test no longer works - although I confirmed this behavior previously and can reproduce another way. The bug looks to be similar to the original posters - where undefined should not be logged as the element covering another element.

NEED A REPRODUCIBLE EXAMPLE

@Jazzepi @KriKe @mrmojica @kmichetti @andezzat

This is not enough information for us to run this test code on our own to verify there is a visibility issue with fixed elements. We would need a reproducible example of this in order to address this. Can you open a new issue and provide one?

Actual Bug

We will be repurposing this issue to track the bug where the error message prints:

is being covered by another element: undefined

If you have any other confirmed bug concerning visibility - check the existing issues or open a new issue.

[mrmojica]

Thanks @jennifer-shehane for the response! Using .scrollIntoView() did the job.

[cypress-bot]

The code for this is done in cypress-io/cypress#5594, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 3.7.0.