Very slow '[data-cy="xyz"]:visible' selector

[JesseZomer]

Current behavior

We have an application where the DOM can get pretty big. We use the [data-cy] attribute for most selectors and that works pretty great and fast.

Although sometimes we have the same selector two times on the page, but one hidden (one for mobile, one for desktop for example). We solve this by using [data-cy=xyz]:visible however you can see this slows the tests way down. Sometimes up to a few seconds per selector. Also the test runner seems to get stuck while trying to find the element.

Desired behavior

Using :visible in your selector should still be fast and the test runner shouldn't get stuck.

Test code to reproduce

https://github.com/JesseZomer/cypress-slow-visible-selector

I've added 3 tests. The first two are fast like normal, but the third one is a lot slower. Not as slow as in my application, because the page is pretty simple I assume. You can however definitely see the test runner timer getting stuck and see that the test takes considerably longer than the first two.

Cypress Version

12.9.0

Node version

v16.14.2

Operating System

Pop!_ OS 21.10

Debug Logs

No response

Other

We believe the regression happened somewhere in v12, because our ci runtimes doubled. However I've tried my repo with v11.2 and I see the same results, so not really sure about that.