Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
anthwinter opened this issue Feb 26, 2018 · 12 comments · Fixed by #5594

Comments

@anthwinter
Copy link

@anthwinter anthwinter commented Feb 26, 2018

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 comment has been minimized.

Copy link

@Jazzepi Jazzepi commented Jun 4, 2018

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.

@krike

This comment has been minimized.

Copy link

@krike krike commented Jul 19, 2018

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

testproblem

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

This comment has been minimized.

Copy link

@Knaledge Knaledge commented Sep 17, 2018

@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

This comment has been minimized.

Copy link

@kud kud commented Oct 26, 2018

Related: #2558

@jennifer-shehane

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Nov 27, 2018

@Knaledge Thank you for providing a reproducible example.

screen shot 2018-11-27 at 3 39 08 pm

@mrmojica

This comment has been minimized.

Copy link

@mrmojica mrmojica commented Feb 8, 2019

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

This comment has been minimized.

Copy link

@kmichetti kmichetti commented Apr 9, 2019

Same issue, intermittent with electron 59

@andezzat

This comment has been minimized.

Copy link
Contributor

@andezzat andezzat commented Apr 10, 2019

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

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Jun 11, 2019

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.

@jennifer-shehane jennifer-shehane changed the title Test for visibility not working as expected for an element that has 'position: fixed' parent When 'is.visible' failure, error shows 'is being covered by another element: undefined' Jun 11, 2019
@mrmojica

This comment has been minimized.

Copy link

@mrmojica mrmojica commented Aug 12, 2019

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

@cypress-bot

This comment has been minimized.

Copy link

@cypress-bot cypress-bot bot commented Nov 26, 2019

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

This comment has been minimized.

Copy link

@cypress-bot cypress-bot bot commented Nov 27, 2019

Released in 3.7.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
9 participants
You can’t perform that action at this time.