Ascertain whether the page has entered the interactive state after being rendered through Server-Side Rendering (SSR) #2078
-
Hello @jan-molak! 👋 I'm exploring the Serenity/JS + Cucumber JS + WebdriverIO setup and I'm curious if there's a way to verify when a page, rendered using Server-Side Rendering (SSR), has entered the interactive state. In the context of a Nuxt 3 application, the page is initially rendered on the server side and sent to the client, where it is later hydrated to enable interactivity through the addition of JavaScript. I'm specifically interested in understanding how we can determine when this hydration process has been successfully completed. Has anyone encountered a similar scenario or have insights into handling this with the mentioned tech stack? Looking forward to your experiences and suggestions! 🚀 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
As per the discussion with @jan-molak, the following solution worked for me. I linked the data attribute And then used |
Beta Was this translation helpful? Give feedback.
As per the discussion with @jan-molak, the following solution worked for me.
I linked the data attribute
:data-state="isHydrated"
to an element, and withinthe onMounted hook
(Vue 3 composition API syntax), I changed the value ofisHydrated
from false totrue
.And then used
Wait.until(Attribute.called('data-state').of(my_element), equals('true'))
to wait until the hydration process is completed and the application becomes interactive.