fix: #29093 for elements with length in rem

[senpl]

• Closes
  Visible elements are "not visible" for Cypress #29093
• Closes "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position #28638

Additional details

Change was necessary because previous visibility check version works only with integer values for visibility. Current fix provide it with getting real width.
In theory it now fixes issue when visible element throws error as hidden/invisible or without width/height.
Still how visibility should behave when grid is used is not really clear, so there might be cases that this check is not perfect. Still I guess it's better than it was before.

Steps to test

e2e or component test

describe('Repro', () => {
    it('Skeleton Fail without changes', () => {
        cy.viewport('macbook-16');
        cy.visit('https://www.skeleton.dev/docs/get-started');
        cy.get('#sidebar-left > div > section').click();
      });
  })

How has the user experience changed?

User no longer has to use {force: true} fix.

PR Tasks

• [] Have tests been added/updated?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[CLAassistant]

All committers have signed the CLA.

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[jennifer-shehane]

@senpl Thanks! Can you add a test around this new behavior?

There is a Contributing Guide that covers how to contribute and get Cypress running locally in generally here: https://github.com/cypress-io/cypress/blob/develop/.github/CONTRIBUTING.md

Here's an example of another issue's test code:

• HTML template replicating bug: https://github.com/cypress-io/cypress/blob/develop/packages/driver/cypress/fixtures/issue-565.html
• Test spec: https://github.com/cypress-io/cypress/blob/develop/packages/driver/cypress/e2e/issues/565.cy.js

To run the tests:

• within cypress root, run yarn
• run yarn workspace @packages/driver cypress:open
• click on the test you're writing to run it within Cypress

Instructions for running the driver tests can always be found here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/README.md

[jennifer-shehane]

I manually tested the change against the 3 examples this is expected to fix. It does fix them.

There are some other tests failing however, so it looks like this logic has broken some other visibility checks:

I had some concern around performance of this, and whether this would mean slower performance. Running benchmarks against offsetWidth vs getBoundingClientRect seem to indicate that getBoundingClientRect is actually faster.

Before

After

[jennifer-shehane]

@senpl Could you explain the need for this change? If users are required to update their tests based on this change, this would be considered a breaking change.

[senpl]

.shiki is not precise selector. In moment of search in this test there are two elements with this locator. One berly visible but still possible to locate.
This selector better explain what test intended to search.

[senpl]

It might be breaking change for poorly created locators. Still it's closer to what user can actually see in browser. So it's probably good change. If I could locate element in browser then it's visible, but there should be some rules to determine if something is visible or not.

[cacieprins]

Hi @senpl ,

There are two .shiki elements in this component. One of them is always hidden, and one of them that should show/hide on click. The hidden state for this element is caused by a parent element with maxHeight of 0, and overflow:hidden.

I do agree that the .shiki selector here should be more specific. I edited it to assert the expected visibility state of both elements:

    // A FileRow with status=valid should not be initially open 
    cy.get('[data-cy=valid] .shiki').should('not.be.visible')
    // A FileRow with status=changes should be initially open
    cy.get('[data-cy=changes] .shiki').should('be.visible')

    // Clicking the header should collapse the shiki code view in the FileRow 
    cy.contains('cypress/integration/command.js').click()

    cy.get('[data-cy=valid] .shiki').should('not.be.visible')
    cy.get('[data-cy=changes] .shiki').should('not.be.visible')

Unfortunately, while this test passes on the develop, it does not pass with the visibility changes in this branch. Can you look into why?

Thank you!

[senpl]

I already did.
But this second locator is still visible. I could click it in browser and get it's locator. It's not big. It could to be very hard to click on it. Still it is visible. I do not see reason for Cypress to mark something as invisible when it is visible. It might produce warning that something is hardly visible, still if it's partly visible it should not expect that element to be not visible.

[senpl]

As in pictures below .shrik width is bigger then element code below in moment of checking. This is why something that is really invisible or not exist should be checked, not something that is visible in moment of click. Alternatively we could wait for this moment to become invisible, but this would make test slower and not as practical.

Dismissing previous review

[cacieprins]

Hi @senpl ,

There are two .shiki elements in this component. One of them is always hidden, and one of them that should show/hide on click. The hidden state for this element is caused by a parent element with maxHeight of 0, and overflow:hidden.

I do agree that the .shiki selector here should be more specific. I edited it to assert the expected visibility state of both elements:

    // A FileRow with status=valid should not be initially open 
    cy.get('[data-cy=valid] .shiki').should('not.be.visible')
    // A FileRow with status=changes should be initially open
    cy.get('[data-cy=changes] .shiki').should('be.visible')

    // Clicking the header should collapse the shiki code view in the FileRow 
    cy.contains('cypress/integration/command.js').click()

    cy.get('[data-cy=valid] .shiki').should('not.be.visible')
    cy.get('[data-cy=changes] .shiki').should('not.be.visible')

Unfortunately, while this test passes on the develop, it does not pass with the visibility changes in this branch. Can you look into why?

Thank you!