playwright.config.ts

import { defineConfig, devices } from '@playwright/test'
import { SNAPSHOT_FALLBACK_RATIO } from './e2e/support/snapshot-policy'

// Browser E2E for Loop Studio.
//   chromium       — http dev server (real Workers, the store bridge)
//   build-portable — one-shot `npm run build:portable`
//   portable       — the built single file opened from file:// (cooperative path,
//                    no dev server, no bridge); depends on build-portable

const PORT = 5173
const BASE_URL = `http://localhost:${PORT}`

export default defineConfig({
  testDir: './e2e',
  fullyParallel: false, // the specs share one dev server + a single graph document
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 1 : 0,
  workers: 1,
  // on CI the JSON report is also the per-file timing sample that
  // scripts/e2e-shard-weights.mjs feeds back into e2e/shard-weights.json
  reporter: process.env.CI
    ? [['github'], ['list'], ['html', { open: 'never' }], ['json', { outputFile: 'test-results/e2e-report.json' }]]
    : [['list']],
  timeout: 30_000,
  expect: {
    timeout: 8_000,
    // docs/visual-snapshot-policy.md — the tolerance is PER CAPTURE KIND and is
    // applied by `snap()` (e2e/support/loop.ts) from e2e/support/snapshot-policy.ts.
    // This global value is only a fallback for a shot that bypassed snap(), which
    // scripts/check-snapshot-policy.mjs forbids; it equals the loosest policy
    // (desktop full page, 0.5 %). Note `--update-snapshots` only rewrites a
    // baseline whose test FAILS; a drifted image inside its tolerance is kept.
    toHaveScreenshot: { maxDiffPixelRatio: SNAPSHOT_FALLBACK_RATIO, animations: 'disabled', caret: 'hide' },
  },
  use: {
    baseURL: BASE_URL,
    viewport: { width: 1280, height: 800 },
    deviceScaleFactor: 1,
    colorScheme: 'light',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      // portable-file runs under the `portable` project; dist.spec runs under
      // playwright.dist.config.ts (production build + `vite preview`); mobile.spec
      // runs under the `mobile` project (small viewport + touch)
      testIgnore: [
        /portable-file\.spec\.ts/,
        /dist\.spec\.ts/,
        /pwa\.spec\.ts/,
        /mobile\.spec\.ts/,
        /flow-colour-mobile\.spec\.ts/,
        /mobile-inspector-overlay\.spec\.ts/,
      ],
      use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 800 } },
    },
    {
      // docs/mobile.md §MV10 — the mobile View/Run layout, at iPhone-class
      // portrait (390x844) and landscape (844x390), touch + coarse pointer.
      name: 'mobile',
      // mobile.spec.ts + the acceptance specs that must run under BOTH the
      // desktop (`chromium`) and the mobile viewport
      testMatch: /(mobile\.spec|mobile-inspector-overlay\.spec|run-diagnostics\.spec|canvas-refresh-visual\.spec|model-verification\.spec|timeline-end-labels\.spec|playback-a11y-background\.spec|playback-visual\.spec|flow-colour-mobile\.spec|unreadable-autosave\.spec)\.ts/,
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 390, height: 844 },
        isMobile: true,
        hasTouch: true,
      },
    },
    {
      name: 'build-portable',
      testMatch: /portable\.setup\.ts/,
    },
    {
      name: 'portable',
      testMatch: /portable-file\.spec\.ts/,
      dependencies: ['build-portable'],
      use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 800 }, baseURL: undefined },
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: BASE_URL,
    reuseExistingServer: !process.env.CI,
    timeout: 60_000,
    stdout: 'ignore',
    stderr: 'pipe',
  },
})