trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stabilize e2e against Vite dev hydration race

Browse source 
Two issues caused the same class of flake locally:

1. Default workers were CPU-count, but the journal/planner are served
   by Vite dev (not the production build CI uses). Cold-compiling
   `/api/auth/register` under N parallel hits produced 30s timeouts
   on a quarter of runs. Set workers to 1 in both environments for
   parity with CI.
2. Even sequentially, a button is clickable per Playwright's
   actionability check before React has hydrated its `onClick`. So
   the first click after a navigation could fire native form submit
   (or do nothing), which manifested as "URL never changed to /" or
   "menuitem Log Out never appeared". Add a `waitForHydration` helper
   that polls for React fibers (`__reactProps$<id>`) attached to a
   DOM node and call it after each cross-page navigation that ends
   in an interactive form or dropdown.

CI is unaffected (production builds hydrate fast and didn't expose
either bug), but the helper is harmless there.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-05-08 01:06:27 +02:00
parent fc2d0a02d5
commit b7ed54ba72
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
7 changed files with 41 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
e2e/social.test.ts
View file

@ -1,4 +1,4 @@
import { test, expect, type CDPSession, type Page } from "./fixtures/test";
import { test, expect, waitForHydration, type CDPSession, type Page } from "./fixtures/test";
// Inline virtual-authenticator + register helpers, mirroring the pattern
// in auth.test.ts / public-content.test.ts so this file runs standalone.
@ -19,6 +19,7 @@ async function setupVirtualAuthenticator(cdp: CDPSession) {
async function registerUser(page: Page, email: string, username: string) {
await page.goto("/auth/register");
await expect(page.getByRole("heading", { name: "Register" })).toBeVisible();
await waitForHydration(page);
await page.getByLabel("Email").fill(email);
await page.getByLabel("Username").fill(username);
await page.getByRole("checkbox").check();