Files
crewli/apps/app/playwright-ct.config.ts
bert.hausmans b8d18e63af chore(test-infra): install Playwright + axe-core; configure CT and e2e runners; enable Git LFS for screenshots
B1 of TEST-INFRA-001 (RFC-WS-FRONTEND-PRIMEVUE Amendment A-1).

- Add @playwright/test, @playwright/experimental-ct-vue,
  @axe-core/playwright as dev deps in apps/app
- Add @vue/compiler-dom (transitively required by ct-vue's Vite build
  pipeline; not auto-resolved on Vite 7)
- Install Chromium via `playwright install chromium` (host cache only,
  not committed)
- Configure Git LFS clean/smudge filters globally; track
  apps/app/tests/playwright-{ct,e2e}/__screenshots__/**/*.png
- Integrate `git lfs pre-push` into lefthook.yml since LFS's per-repo
  hook would conflict with the existing sync-staleness hook
- Add playwright/index.html + playwright/index.ts hook file with the
  full provider stack (Vuetify [TEMPORARY: replaced in F3 by PrimeVue],
  Pinia, TanStack Vue Query, memory-history Router with no auth
  guards)
- Add playwright.config.ts (e2e, Chromium-only, baseURL :5173, auto-
  starts `pnpm dev` via webServer)
- Add playwright-ct.config.ts (component testing, Linux-Chromium-only
  baselines, maxDiffPixelRatio 0.001, snapshot path template,
  ssr.noExternal: ['vuetify'] mirroring vitest.config.ts)
- Add scripts: test:component, test:e2e, test:visual,
  test:visual:update
- Add smoke test proving Chromium boots in the CT runner
- Update .gitignore for Playwright runtime artifacts (test-results/,
  playwright-report/, blob-report/, playwright/.cache/)

Vitest's existing 402 tests still pass unchanged.
DoD-17 / DoD-19 CI integration deferred to TEST-INFRA-002 per Amendment
A-1 scope cut (no CI exists in this repo today).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 14:53:57 +02:00

66 lines
2.2 KiB
TypeScript

import { fileURLToPath } from 'node:url'
import { defineConfig, devices } from '@playwright/experimental-ct-vue'
import vue from '@vitejs/plugin-vue'
// Component-test config — mounts individual components in a real
// Chromium via Playwright Component Testing. Used by:
// pnpm test:component (all CT tests, baselines verified)
// pnpm test:visual (subset tagged @visual)
// pnpm test:visual:update (regenerate visual baselines)
//
// E2E (real backend + real frontend) lives in playwright.config.ts.
const sharedAliases = {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
'@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
'@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
'@styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
}
export default defineConfig({
testDir: './tests/playwright-ct',
testMatch: /.*\.spec\.ts$/,
snapshotDir: './tests/playwright-ct/__screenshots__',
snapshotPathTemplate: '{snapshotDir}/{testFilePath}/{arg}{ext}',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: 0,
workers: process.env.CI ? 1 : undefined,
reporter: process.env.CI ? 'github' : 'list',
use: {
trace: 'off',
viewport: { width: 1440, height: 900 },
ctPort: 3100,
ctViteConfig: {
plugins: [vue()],
resolve: { alias: sharedAliases },
// Vuetify ships ESM that Vite needs to inline-process; matches
// the convention from vitest.config.ts's component project.
ssr: { noExternal: ['vuetify'] },
},
},
// Linux-Chromium-only baselines per RFC §A.5 — Firefox/WebKit and
// mobile/responsive viewports deferred to a later sprint. Running
// baselines on macOS (dev) vs Linux (CI) will produce a 1-2px
// anti-alias diff; pixel tolerance below absorbs that, but the
// canonical baseline IS the dev machine for now (no CI yet — see
// BACKLOG TEST-INFRA-002).
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0.001,
threshold: 0.2,
},
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
})