Cypress test fails with "this element is being covered by another element" though it is not

[timheilman]

Current behavior

The upgrade of cypress-realworld-app from MUI v4 to MUI v5 seems to reveal an issue with the coverage calculation, such that Cypress believes an element cannot be clicked because it is being covered by another element, despite that in the viewport displayed in-cypress, no such coverage is occurring, and upon manual reproduction no such coverage occurs either.

Desired behavior

If a manual visit to the webpage results in an element being not-covered, then the cypress test should not consider the element covered and allow interaction with it without needing to specify { force: true }.

Test code to reproduce

The bug is reproducible in the ui/transaction-view.spec.ts test in the mobile viewport from this PR:
cypress-io/cypress-realworld-app#1522
at this commit:
cypress-io/cypress-realworld-app@8c67acb (#1522)

So, to reproduce:

git clone [email protected]:cypress-io/cypress-realworld-app.git
git checkout 8c67acbdd4572af84600ca7fd42fd8042ce8414d
yarn install
yarn build
yarn dev

in another terminal:
yarn cypress:open:mobile
Click "E2E Testing"
Click "Start E2E Testing in Chrome"
Click on the test "ui/transaction-view.spec.ts"

The test "transactions navigation tabs are hidden on a transaction view page" fails with this error:

Timed out retrying after 4050ms: cy.click() failed because this element:

<li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-alignItemsFlexStart css-1v18wys-MuiListItem-root" data-test="transaction-item-J5Fd3dlBEBu">...</li>

is being covered by another element:

<a class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit css-u7g6hc-MuiButtonBase-root-MuiTab-root" tabindex="-1" role="tab" aria-selected="false" data-test="nav-contacts-tab" href="/contacts">...</a>

However, the browser pane on the right shows that the <li> element is not in fact covered by the <a> element.

Moreover, quitting the Cypress app and visiting http://localhost:3000/ in a browser with a narrowed viewport and logging in as Heath93/s3cret, then clicking on the "Mine" tab as the test does also shows the <li> element not covered by the <a> element.

Cypress Version

13.12.0

Node version

v18.19.0

Operating System

MacOS 13.5.1

Debug Logs

I will attach the debug logs as a file if I can after the issue is filed.  Otherwise I get an error trying to file the issue because the body is too long.

Other

It does appear that with this mobile viewport size, a vertical scrollbar for the viewport appears and a vertical scrollbar for the transaction list also appears.

[timheilman]

cypress_open_mobile_debug.txt
Here is a debug file from a run following the reproduction steps.

[jennifer-shehane]

@timheilman Thanks for reporting!

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.