#Solved Wait until hydration is done when Testing with Cypress.io

6 messages · Page 1 of 1 (latest)

thorn plover
#

Hello amazing product!

AstroJs is really amazing and we hope to use it for the next iteration of the cypress.io website. I am having a blast so far.

One hiccup though: I am testing pages end to end, and get a little bit of flake. What I understand is that. When the page loads, nothing is interactive, so clicking on a button would do nothing. But with running automated testing, everything has to be ready or we risk simulating a click that will do nothing.

What is y'all's recommendation for waiting until the end of hydration to run my tests?

Note: I know I could make all my renderings blocking using client:load. That would defeat the purpose of using astrojs so I would rather not.

Screen_Shot_2022-10-05_at_9.16.02_PM.png
thorn plover
#

Cypress can wait until a component has a certain property or attribute before moving forward.
Ideally, we would have a hydration marker added once migration is done.
This way, we wrap all our selectors in a [data-hydrated] super selector.

Something like cy.get('[data-hydrated] .my-button').click() .
This would have cypress wait for the end of hydration. Then, it would interact with the component.

thorn plover
#

The answer was sitting right under my nose but it would be very useful to document.

When a component is rendered by astro on the server it has a little ssr attribute that is removed after hydration. To wait for hydration, I need to `cy.get(':not([ssr]) .my-button') and cypress will automatically wait for hydration to be done.

Noice !!

#

It still needs to be tried out before setting it as solved. ONce I try it out I'll be sure to create a blog post

thorn plover
#

Solved Wait until hydration is done when Testing with Cypress.io