Configuration

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // --- Test discovery ---
  testDir: './tests',
  testMatch: '**/*.spec.ts',          // default
  testIgnore: '**/fixtures/**',

  // --- Parallelism ---
  fullyParallel: true,                // all tests in parallel (default: false)
  workers: process.env.CI ? 2 : undefined,  // undefined = auto (# CPUs)

  // --- Retries ---
  retries: process.env.CI ? 2 : 0,

  // --- Timeouts ---
  timeout: 30_000,                    // per test
  expect: { timeout: 5_000 },         // per assertion

  // --- Global hooks ---
  globalSetup: './global-setup.ts',
  globalTeardown: './global-teardown.ts',

  // --- Reporting ---
  reporter: [
    ['list'],
    ['html', { open: 'on-failure' }],
  ],

  // --- Default options for all tests ---
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    headless: true,
    viewport: { width: 1280, height: 720 },
    locale: 'en-US',
    timezoneId: 'America/New_York',
    actionTimeout: 10_000,
    navigationTimeout: 30_000,
  },

  // --- Projects (cross-browser / device matrix) ---
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 13'] } },
  ],

  // --- Dev server ---
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120_000,
  },
});

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    // Desktop browsers
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },

    // Mobile
    { name: 'pixel5',    use: { ...devices['Pixel 5'] } },
    { name: 'iphone13',  use: { ...devices['iPhone 13'] } },

    // Branded channels
    { name: 'chrome', use: { channel: 'chrome' } },
    { name: 'edge',   use: { channel: 'msedge' } },

    // Tagged subsets
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/,
    },
    {
      name: 'auth-tests',
      use: { storageState: 'auth.json' },
      dependencies: ['setup'],        // run setup project first
    },
  ],
});

webServer: {
  command: 'npm run start',
  url: 'http://localhost:3000',
  reuseExistingServer: !process.env.CI,
  timeout: 120_000,       // ms to wait for server to be ready
  stdout: 'pipe',         // 'pipe' | 'ignore'
  stderr: 'pipe',
  env: { NODE_ENV: 'test' },
},

// Multiple servers
webServer: [
  { command: 'npm run api', url: 'http://localhost:4000' },
  { command: 'npm run web', url: 'http://localhost:3000' },
],

reporter: 'list'                               // simple shorthand
reporter: [['list'], ['html']]                 // multiple

// Built-in reporters
['list']                                       // stdout (default non-CI)
['dot']                                        // compact dots
['line']                                       // one line per test
['html', { open: 'on-failure', outputFolder: 'report' }]
['json', { outputFile: 'results.json' }]
['junit', { outputFile: 'results.xml' }]
['github']                                     // GitHub Actions annotations
['blob', { outputDir: 'blob-report' }]         // for merge-reports
['null']                                       // suppress all output

npx playwright test --headed
npx playwright test --workers=4
npx playwright test --retries=1
npx playwright test --timeout=60000
npx playwright test --reporter=dot
npx playwright test --project=chromium
npx playwright test --grep @smoke
npx playwright test --grep-invert @slow
npx playwright test --update-snapshots
npx playwright test --forbid-only

// global-setup.ts
import { chromium, FullConfig } from '@playwright/test';

export default async function globalSetup(config: FullConfig) {
  const { baseURL } = config.projects[0].use;
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(baseURL + '/login');
  // ... login steps
  await page.context().storageState({ path: 'auth.json' });
  await browser.close();
}

// global-teardown.ts
export default async function globalTeardown() {
  // clean up DBs, temp files, etc.
}