'Cypress not finding DOM elements even though playground selector shows it

I've added data-cy id's to specific DOM elements in my Next/react application.

Yet, when it proceeeds to the cy.get() command it errors out with

Timed out retrying after 4000ms: Expected to find element: [data-cy=button-buy], but never found it.

Surprisingly, I can still confirm the existence of these data-cy's in my codebase when running tests with the playground selector tool in the Cypress browser, they appear on the respective page.

When I visit() these pages I don't receive any error codes, so it should be that the test is authorized to visit these pages. SO why aren't the tests able to access these specific DOM elements?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source