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

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

[jennifer-shehane]

Response to @anthw, original post https://github.com/cypress-io/cypress/issues/1379#issue-300286449

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 https://github.com/cypress-io/cypress/issues/1379#issuecomment-422154084

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.

[cypress-bot[bot]]

Released in 3.7.0.