Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
s1gr1d merged 1 commit into from
May 26, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .agents/skills/write-tests/SKILL.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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`.
Expand Down
1 change: 1 addition & 0 deletions dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.client.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Comment on lines 35 to 41

@sentrysentryBotMay 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: A race condition in the test may cause a click on #errorBtn to occur before Vue hydration, potentially leading to a flaky test.
Severity: LOW

Suggested Fix

Before attempting to click the #errorBtn, introduce a wait mechanism to ensure the Vue application has completed client-side hydration. This could involve waiting for a specific element that appears after hydration or using a more robust selector that guarantees interactivity.

Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location:
dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/errors.client.test.ts#L35-L41
Potential issue: A potential race condition exists in the 'captures error thrown on
click' test. The test navigates to the `/client-error` page and immediately clicks the
`#errorBtn` element. However, the `@click` handler for this button is attached by Vue
only after the client-side application has fully hydrated. If the click occurs before
hydration is complete, the event handler will not be present, the click will have no
effect, and the test may time out. This can lead to flaky test results, particularly in
high-load CI environments where hydration might be slower.

Did we get this right? 👍 / 👎 to inform future reviews.

@isaacsisaacsMay 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the line directly above this one is doing exactly what the agent is suggesting, waiting for a function that indicates readiness?

@Lms24Lms24May 26, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think in this case, the subsequent navigation to /client-error is safe because we already waited on hydration on the initial page. On the click to /client-error, the client router should already have taken over, making the navigation become a soft SPA navigation. Will leave the call up to @s1gr1d here because my understanding of nuxt is very limited : D

@s1gr1ds1gr1dMay 26, 2026

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes 😄

Expand Down
Loading