test(nuxt): Fix flaky test and add note about hydration timing to skill (#21054)

Fixes flaky test and also adds a note about how to properly test
something like this to our test skill (because AI tends to fix that with
the discouraged `networkidle` option):
https://playwright.dev/docs/api/class-page#page-wait-for-load-state

Closes #21047

Author: s1gr1d

.agents/skills/write-tests/SKILL.md

@@ -465,6 +465,22 @@ test('captures transactions for all routes', async ({ baseURL }) => {
 });
 ```
 
+### SSR hydration timing
+
+In SSR apps (Nuxt, SvelteKit, Next.js), elements are visible before framework event handlers attach.
+Playwright's actionability checks pass on server-rendered HTML, so `.click()` can fire before
+hydration, making it a no-op and timing out `waitForError`. Wait for the Sentry SDK before
+interacting:
+
+```typescript
+await page.goto(`/test-param/1234`);
+await page.waitForFunction(() => typeof window.__SENTRY__ === 'object');
+await page.locator('#errorBtn').click();
+```
+
+Don't use `networkidle`. Playwright discourages it. Use `waitForFunction` with a condition that
+directly proves readiness.
+
 ### Common pitfalls
 
 - **Proxy name mismatch:** `APP_NAME` must match `proxyServerName` in `start-event-proxy.mjs`.

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.client.test.ts

@@ -35,6 +35,7 @@ test.describe('client-side errors', async () => {
     });
 
     await page.goto(`/test-param/1234`);
+    await page.waitForFunction(() => typeof window.__SENTRY__ === 'object');
     await page.locator('#errorBtn').click();
 
     const error = await errorPromise;