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 I do see this visibility test failing in Firefox still: https://app.circleci.com/pipelines/github/cypress-io/cypress/61191/workflows/c905446a-87ae-471c-b49d-c56af8106b97/jobs/2544376

[senpl]

On current firefox 125 it works with my version. Is there a reason to not use latest version ???

[jennifer-shehane]

@senpl We just don't have the updates for Firefox automated, so it falls behind.

[jennifer-shehane]

Yah this does pass for me locally in Firefox 124. :/

[jennifer-shehane]

This is coincidentally trying to be updated here atm: #29391

[senpl]

as #29391 (comment) is solved may I please for rerun of tests?

[jennifer-shehane]

@senpl Yay, didn't realize this was merged. I'll rerun

[jennifer-shehane]

@senpl There's a couple of weird errors in the test files that seem unrelated that I'm tracking down. Outside of that, there is a failure in our own tests due to the visibility changes that doesn't seem accurate.

You can see the failure in run-launchpad-component-tests-chrome and run them yourself using the packages/launchpad/README.md instructions for running component tests.

Cypress is saying something is visible when it is not with this change.

[cypress]

3 failed and 10 flaky tests on run #55315 ↗︎

3

29191

1327

0

10

Details:

Merge branch 'develop' into issue-29093-fix-Visible-elements-are-"not-visible"-f...
Project: cypress	Commit: 050ff5fc91
Status: Failed	Duration: 19:48 💡
Started: May 3, 2024 6:56 PM	Ended: May 3, 2024 7:16 PM

  src/components/code/FileRow.cy.tsx • 1 failed test • launchpad-ct

View Output

Test		Artifacts
FileRow > opens on click		Test Replay Screenshots

  cypress/e2e/specs_list_e2e.cy.ts • 1 failed test • app-e2e

View Output

Test		Artifacts
App: Spec List (E2E) > with no saved spec filter > has an tag in the Spec File Row that runs the selected spec when clicked		Test Replay Screenshots

  cypress/e2e/dom/visibility.cy.ts • 1 failed test • 5x-driver-firefox

View Output

Test		Artifacts
... > is hidden when parent overflow hidden and out of bounds above		</td> </tr></table>   project-setup.cy.ts • 1 flaky test • launchpad-e2e View Output Test Artifacts ... > skips the setup page when choosing e2e tests to run Test Replay Screenshots   error-handling.cy.ts • 1 flaky test • launchpad-e2e View Output Test Artifacts ... > automatically sources webpack.config.js Test Replay Screenshots   commands/net_stubbing.cy.ts • 2 flaky tests • 5x-driver-electron View Output Test Artifacts network stubbing > waiting and aliasing > yields the expected interception when two requests are raced Test Replay ... > stops waiting when an fetch request is canceled Test Replay   commands/waiting.cy.js • 1 flaky test • 5x-driver-electron View Output Test Artifacts ... > waits for requestTimeout and responseTimeout override Test Replay   commands/waiting.cy.js • 1 flaky test • 5x-driver-chrome:beta View Output Test Artifacts ... > errors > throws when waiting for 2nd response to route Test Replay The first 5 flaky specs are shown, see all 7 specs in Cypress Cloud. Review all test suite changes for PR #29224 ↗︎