search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.72k stars 3.16k forks source link

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

Open JesseZomer opened 1 year ago

JesseZomer commented 1 year ago

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.

jordanpowell88 commented 1 year ago

@JesseZomer Thanks for creating this issue and for creating a reproducible example. Your example clearly shows the performance difference between the two queries. I'm going to route this to our app team where they may investigate further.