Print reasons why Cypress considers an element 'visible' in errors.

Is this a Feature or Bug?

Feature

Current behavior:

When I assert that an element .should('not.be.visible'), but Cypress finds that it is visible, it doesn’t tell me why it considered the element visible.

Error: why does Cypress think it’s visible??

Desired behavior:

Cypress should explicitly print the reasons for why Cypress considers an element ‘visible’ when it fails .should('not.be.visible') assertion (just as it does for when it fails .should('be.visible')).

My specific use case had to do with an element on my page having a style of {opacity: 0}. So, to me, the element seems to not be visible and I expected a .should('not.be.visible') assertion to pass.

After speaking with the Cypress team, the current behavior is correct however. Since the browser actually allows users to interact with elements that have {opacity:0} and Cypress uses this visibility algorithm to determine if elements are intractable, they do not intend to change this behavior.

The list of reasons for why Cypress considers something visible may have a specific message about opacity listed first?

How to reproduce:

cy.get('.el-with-opacity-zero').should('not.be.visible')

Reasons why an element is considered visible

Reasons why an element is considered not visible

• The element is partially covered by another element, so not fully visible as in https://github.com/cypress-io/cypress/issues/3369
• The element has been detached from the DOM (is effective height/width of 0) https://github.com/cypress-io/cypress/issues/696#issue-261674444

[crcatala]

Just ran into this issue. I agree that logging a specific reason (opacity) allows the user some context to why the the assertion failed. If such logging isn’t a priority, perhaps even a mention in documentation about this caveat could be useful?

[L0wry]

This will probably be a deciding factor if we use cypress as our go-to ui testing tool very very soon.

plz help