keyboardia/app/playwright.config.ts at 59947b1ac8e03c2d25051e98ff56638dfdc6720f · adewale/keyboardia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { defineConfig, devices } from '@playwright/test';

/**
 * Playwright E2E Test Configuration
 *
 * Features:
 * - Cross-browser testing (Chromium, WebKit)
 * - Mobile viewport testing (iPhone, Pixel)
 * - Tracing and screenshots on failure
 * - Auto-starting dev server
 *
 * Note: Firefox was removed due to persistent drag-and-drop failures
 * that don't occur in real Firefox browsers. The failures appear to be
 * Playwright-specific issues with Firefox's drag event handling.
 *
 * @see specs/research/PLAYWRIGHT-TESTING.md
 */
export default defineConfig({
  testDir: './e2e',
  timeout: 30000,

  // Retry flaky tests in CI (multiplayer/timing tests can be sensitive)
  retries: process.env.CI ? 2 : 0,

  // Parallel execution
  // - CI: 4 workers for reasonable parallelism
  // - Local: 2 workers by default to avoid 429 rate limiting
  // - Serial mode: Use E2E_SERIAL=1 or npm run test:e2e:serial for single worker
  fullyParallel: !process.env.E2E_SERIAL,
  workers: process.env.CI ? 4 : (process.env.E2E_SERIAL ? 1 : 2),

  // Reporting
  reporter: [
    ['html', { open: 'never' }],
    ['json', { outputFile: 'test-results/results.json' }],
    ...(process.env.CI ? [['github' as const]] : [['list' as const]]),
  ],

  use: {
    // Support PLAYWRIGHT_BASE_URL for full-stack testing against wrangler dev
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5175',
    headless: true,

    // Tracing for debugging failures
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on-first-retry',

    // Timeouts
    actionTimeout: 10000,
    navigationTimeout: 30000,
  },

  // Cross-browser + mobile projects
  // Strategy: Run Chromium first as smoke test, other browsers depend on it passing
  // This gives fast feedback (~3-5 min) while still ensuring cross-browser compatibility
  projects: [
    // Primary: Chromium runs first (smoke test)
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    // Secondary: Only run if Chromium passes
    // Note: Firefox removed - see comment at top of file
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      dependencies: ['chromium'],
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 7'] },
      dependencies: ['chromium'],
    },
    {
      name: 'mobile-safari',
      use: { ...devices['iPhone 14'] },
      // Can run independently for local testing; CI still runs chromium first via workflow order
    },
  ],

  // Only start webServer when not using external server (PLAYWRIGHT_BASE_URL)
  // Full-stack testing via test:e2e:full-stack manages wrangler dev externally
  webServer: process.env.PLAYWRIGHT_BASE_URL
    ? undefined
    : {
        command: process.env.USE_MOCK_API
          ? 'USE_MOCK_API=1 npm run dev -- --port 5175'
          : 'npm run dev -- --port 5175',
        port: 5175,
        reuseExistingServer: !process.env.CI,
        timeout: 120000,
      },
});