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.

Test fails as a result of a visible element being deemed not visible.

See original GitHub issue

Current behavior

Cypress fails a test indicating that an element is not visible, but the element is actually visible onscreen.

Desired behavior

The test passes because the element is visible.

Test code to reproduce

context('Visibility Issue', function () {
  it('Test', function () {
    cy.visit('https://play.vidyard.com/EmrX1jweW4rRGPRJEQeqtn?first_frame=1');
    cy.wait(5000); // Just to make sure everything is loaded.
    cy.contains('Cypress is amazing!')
      .should('be.visible');
  });
});

The element is clearly visible onscreen, yet this test fails because it says that the element is covered by another element. 🤷‍♂️

Versions

This occurs in Cypress 5.1.0 and 6.0.0 in Chrome 87, Firefox 82, Edge, 87, and Electron 87 on macOS 10.15.7.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

todd-m-kempcommented, Dec 11, 2020

Hi @bartbriek .

I don’t think this is related.

Cypress 6.0.0 introduced a change to how elements that do not exist respond to the .should('not.be.visible') assertion. See the changelog for full details, but the element_that_is_not_visible does not exist in the page (as evidenced by the 0 next to it in the screenshot you provided) and therefore the .should('not.be.visible') assertion will fail in Cypress 6.1.0. The assertion would not have failed in version 5.6.0 which would explain why it was passing for you previously. After upgrading to Cypress 6.0.0 or above, the assertion that should be used on this element is .should('not.exist').

Hope this helps!

1reaction

bahmutovcommented, Dec 3, 2020

I have described how I debug visibility problems and step through Cypress code in Cypress.dom.isVisible using your code as an example. Read https://glebbahmutov.com/blog/debug-visibility/ and/or watch https://www.youtube.com/watch?v=nSmHxxwceDU

Top Results From Across the Web

Debug the Element Visibility Problems in Cypress

Cypress fails the test when the clearly visible "Cypress is amazing! ... The test is failing because an element is deemed to be...

angularjs - Testing whether certain elements are visible or not

Thus, as an example, the right way to test if the element is hidden would be: expect(element.find('.value-entry input').hasClass('ng-hide')).toBe(true);.

Unable to verify Element Visibility for IF statement. in Test Studio

Hi All, I am Unable to verify Element Visibility for IF statement. The scenario is I am using test step(Quick Step) as "Verify...

Cypress basics: check if element exists - Filip Hric

Our test would not fail on line 13, but on line 14. Our .should('be.visible') assertion would be visible, since our element is not...

Debug Cypress element visibility issues - YouTube

This video shows how to step through the Cypress.dom.isVisible function to investigate why Cypress thinks an element is invisible, ...