Skip to content

Migrate browser tests to native @playwright/test - #60

Merged
smiggleworth merged 1 commit into
mainfrom
refactor/playwright-native-browser-tests
Sep 11, 2026
Merged

smiggleworth merged 1 commit into
mainfrom
refactor/playwright-native-browser-tests

Conversation

@smiggleworth

Copy link
Copy Markdown
Contributor

Summary

Migrates this repo's browser-mode test suite off vitest browser-mode (@vitest/browser-playwright) onto native @playwright/test, following the reference pattern established in phase 1 (askrjs/askr-i18n#28). This decouples test:browser from vite-plus's internally pinned vitest version, which has caused recurring unrelated breakage.

What changed

  • playwright.config.ts drives Chromium against the real vp dev server (this is an app repo with a real dev server, unlike the library-harness pattern from phase 1) — baseURL and webServer.url both pinned to 127.0.0.1:4179 to avoid the localhost-vs-127.0.0.1 webServer readiness race that silently timed out CI in phase 1; stdout/stderr piped and a generous startup timeout set proactively
  • tests/browser/docs-search.test.tsx and marketing-layout.test.tsxdocs-search.spec.ts and marketing-layout.spec.ts, faithful ports that page.goto() real routes on the served site (rather than mounting an isolated component tree) and preserve every original assertion
  • removed vitest.test.browser.config.ts, @vitest/browser-playwright, and the standalone playwright devDependency (now pulled in transitively by @playwright/test)
  • removed the tests/browser/__screenshots__ directory — it was gitignored/untracked and unreferenced by any test (no toMatchScreenshot/screenshot assertions exist in the current suite), so nothing needed porting to toHaveScreenshot()
  • test:browser/lint scripts updated accordingly

test:unit is untouched and still runs on vitest via vp test run.

Verification

  • npm run fmt:check, lint, typecheck all pass
  • npm run test:unit — 40 tests passing (vitest, unchanged)
  • npm run test:browser — 41 tests passing (new Playwright suite: 1 docs-search + 40 marketing-layout route/viewport/theme combinations)
  • npm run build (client build, llms docs, SSG, generated-output-contract) passes

Ports the browser-mode suite off vitest browser-mode
(@vitest/browser-playwright) onto native @playwright/test, following the
askr-i18n phase-1 pattern (askrjs/askr-i18n#28). This decouples
test:browser from vite-plus's internally pinned vitest version.

- playwright.config.ts drives Chromium against the real vp dev server
  (127.0.0.1:4179), with server.host pinned to avoid the localhost vs
  127.0.0.1 webServer readiness race on CI, plus piped stdout/stderr and
  a generous startup timeout for diagnostics
- tests/browser/docs-search.test.tsx and marketing-layout.test.tsx ->
  docs-search.spec.ts and marketing-layout.spec.ts, faithful ports that
  navigate real routes on the served site and preserve every original
  assertion
- removed vitest.test.browser.config.ts, @vitest/browser-playwright, and
  the standalone playwright devDependency (now pulled in transitively by
  @playwright/test); removed the orphaned tests/browser/__screenshots__
  directory (gitignored, untracked, and unreferenced by any test - no
  screenshot assertions exist in the current suite)
- test:browser/lint scripts updated accordingly
@smiggleworth
smiggleworth merged commit 9184ba4 into main Sep 11, 2026
1 check passed
@smiggleworth
smiggleworth deleted the refactor/playwright-native-browser-tests branch September 11, 2026 14:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant