trails/playwright.config.ts
Ullrich Schäfer b7ed54ba72
Stabilize e2e against Vite dev hydration race
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>
2026-05-08 01:06:27 +02:00

105 lines
2.7 KiB
TypeScript

import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
testDir: "./e2e",
outputDir: "./e2e/results",
fullyParallel: true,
retries: process.env.CI ? 2 : 0,
// Locally the journal/planner run under Vite dev — many parallel workers
// overwhelm cold-compile of /api/* routes and cause flaky timeouts on
// first hits. CI runs production builds and is unaffected. Keep at 1 in
// both environments for parity.
workers: 1,
reporter: process.env.CI
? [["github"], ["html", { open: "never" }], ["json", { outputFile: "playwright-results.json" }]]
: "list",
use: {
baseURL: "http://localhost:3000",
trace: "on-first-retry",
screenshot: "only-on-failure",
},
projects: [
{
name: "journal",
testMatch: "journal.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3000",
},
},
{
name: "planner",
testMatch: "planner.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3001",
},
},
{
name: "auth",
testMatch: "auth.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3000",
},
},
{
name: "public-content",
testMatch: "public-content.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3000",
},
},
{
name: "demo-bot",
testMatch: "demo-bot.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3000",
},
},
{
name: "integration",
testMatch: "integration.test.ts",
use: {
...devices["Desktop Chrome"],
},
},
{
name: "notifications",
testMatch: "notifications.test.ts",
use: {
...devices["Desktop Chrome"],
baseURL: "http://localhost:3000",
},
},
],
webServer: process.env.CI
? [
{
command: "npx react-router-serve ./build/server/index.js",
url: "http://localhost:3000",
cwd: "./apps/journal",
reuseExistingServer: false,
},
{
command: "node --experimental-strip-types server.ts",
url: "http://localhost:3001",
cwd: "./apps/planner",
reuseExistingServer: false,
},
]
: [
{
command: "pnpm --filter @trails-cool/journal dev",
url: "http://localhost:3000",
reuseExistingServer: true,
},
{
command: "pnpm --filter @trails-cool/planner dev",
url: "http://localhost:3001",
reuseExistingServer: true,
},
],
});