Element is hidden by parent but should('not.be.visible') fails

[bahmutov]

All versions of Cypress

I created the test (skipped for now) in https://github.com/bahmutov/element-e2e-tests/blob/201dba8758e70fd9fa9b6c5e0669237889c574f4/cypress/integration/steps-spec.js#L60-L65

  it.skip('hides code by default', () => {
    // hmm, the element is behind other elements, why
    // is it visible?
    firstSteps()
      .find('.highlight code').should('not.be.visible')
  })

The element .highlight code is inside parent .meta div. I expect the element .highlight code to NOT be visible, by Cypress thinks it is.

The DOM (note parent .meta div)

The problem is that .meta div has a border of 1 pixel, which is visible. Thus, our visibility algorithm thinks the .highlight code inside is visible too. This is incorrect - only the parent's border is visible, the children inside cannot be seen: the border pushes them out, and there is overflow: hidden

[jennifer-shehane]

Related: #677

[jennifer-shehane]

This issue no longer occurs in Cypress version 3.3.1. It's a bit hard to tell whether this is because Cypress fixed the issue or because the application code in question has changed (since the original reproduction visits a public url instead of a statically provided HTML).

Either way, we will close since this is no longer reproducible.

The code below now passes

it('hides code by default', () => {
  cy.visit("http://element.eleme.io/#/en-US/component")
  cy.contains('.nav-item', 'Steps').click()
  cy.get('.demo-steps').first()
    .find('.highlight code').should('not.be.visible')
})

[avallete]

This issue occured to me while working with radix-ui "drawer" element on mobile.

I'll try to setup a MWE to debug this issue ASAP. But the bug is still here.