Visibility check not working for close elements

[daelmaak]

Current behavior

The problem is best described with this simple example - it is a component-testing of ngx-gallery:

The gallery here displays one image at a time. In the test, I slide from the 1st image to the 2nd one and check that the first one is not.be.visible after.

Cypress in this case checks the coordinates of the element in question and checks whether the element is outside of its parent position and if the parent also has overflow: hidden, it can conclude that the element in question indeed isn’t visible. Which should be my case exactly because one of the parents (viewer element) thinly wraps the current image and completely hides the others with the overflow: hidden.

But cypress thinks it is visible because of the < from the line I shared in the link is not sufficient. It has to be <= in order to work correctly. In my case, the rightmost x-position of the 1st image is compared to the leftmost x-position of the parent, and both have the value of 50px. This looks like the images overlap by 1px, but they don’t, they are placed neatly next to each other. So due to cypress’s implementation of finding the x-positions, <= needs to be used instead of <. I am happy to implement this fix if you'd like.

Desired behavior

Cypress recognizes that the 2 elements - images - are only "touching" but not overlapping and the 1st is therefore not visible.

Test code to reproduce

https://github.com/daelmaak/ngx-gallery/blob/test/introduce-cypress-for-component-testing/libs/gallery/src/lib/components/viewer/viewer.component.cy.ts

Cypress Version

12.16

Node version

20.5.0

Operating System

macOS 13.5

Debug Logs

No response

Other

No response

[canourrea23]

#27586

[daelmaak]

[heart] Daniel Macak (damacak) reacted to your message:

…

________________________________ From: Carolina Urrea ***@***.***> Sent: Thursday, August 17, 2023 11:14:18 PM To: cypress-io/cypress ***@***.***> Cc: Daniel Macak (damacak) ***@***.***>; Author ***@***.***> Subject: Re: [cypress-io/cypress] Visibility check not working for close elements (Issue #27514) #27586<#27586> — Reply to this email directly, view it on GitHub<#27514 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AIFY6HM2OI3EPHBBQONOLOTXV2QUVANCNFSM6AAAAAA3LFU5CE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[daelmaak]

Hi @jordanpowell88, could you please have a look at #27586? It's been pending for quite some time now due to some failing checks.

[cypress-bot]

Released in 13.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.5.0, please open a new issue.