test(nuxt): Fix flaky test and add note about hydration timing to skill#21054
test(nuxt): Fix flaky test and add note about hydration timing to skill#21054s1gr1d wants to merge 1 commit into
Conversation
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| }); | ||
|
|
||
| await page.goto(`/test-param/1234`); | ||
| await page.waitForFunction(() => typeof window.__SENTRY__ === 'object'); | ||
| await page.locator('#errorBtn').click(); | ||
|
|
||
| const error = await errorPromise; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
It seems like the line directly above this one is doing exactly what the agent is suggesting, waiting for a function that indicates readiness?
isaacs
left a comment
isaacs
left a comment
There was a problem hiding this comment.
This seems reasonable to me. I don't think the clanker's concern is valid here, that's the whole point of the skill change, no?
| }); | ||
|
|
||
| await page.goto(`/test-param/1234`); | ||
| await page.waitForFunction(() => typeof window.__SENTRY__ === 'object'); | ||
| await page.locator('#errorBtn').click(); | ||
|
|
||
| const error = await errorPromise; |
There was a problem hiding this comment.
It seems like the line directly above this one is doing exactly what the agent is suggesting, waiting for a function that indicates readiness?
2 participants
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
networkidleoption): https://playwright.dev/docs/api/class-page#page-wait-for-load-stateCloses #21047