playwright.config.ts — Projects, Retries, Workers

// playwright.config.ts — a working starting point
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,    // fail CI if .only is committed
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : '50%',
  reporter: process.env.CI ? 'github' : 'html',

  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    // Optional: mobile viewports
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 13'] } },
  ],

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

// Auth project pattern — log in once, reuse the state in every test
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    // 1. Runs first, no dependency. Saves auth state to a file.
    {
      name: 'setup',
      testMatch: /global\.setup\.ts/,
    },
    // 2. Depends on setup. Loads the saved state automatically.
    {
      name: 'chromium',
      dependencies: ['setup'],
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
    },
    // 3. A second project that DOESN'T log in (e.g., public pages).
    {
      name: 'chromium-public',
      testMatch: /\.public\.spec\.ts/,
      use: { ...devices['Desktop Chrome'] },
      // No storageState — no auth state.
    },
  ],
});

// Per-test override — when one test needs different defaults
import { test, expect } from '@playwright/test';

// Override the viewport for this entire file
test.use({ viewport: { width: 320, height: 568 } });

test('mobile menu opens', async ({ page }) => {
  await page.goto('/');
  // Mobile-only assertions...
});

// Or override just one test inside a describe
test.describe('admin features', () => {
  test.use({ storageState: 'playwright/.auth/admin.json' });

  test('admin can delete posts', async ({ page }) => {
    // Logged in as admin via the override
  });
});

# Run all projects (default)
npx playwright test

# Run only one project
npx playwright test --project=chromium

# Run multiple
npx playwright test --project=chromium --project=webkit

# Run a single test file across all projects
npx playwright test e2e/login.spec.ts

# Combine — one file, one project
npx playwright test e2e/login.spec.ts --project=chromium

# Headed (see the browser) — great for local debugging
npx playwright test --headed --project=chromium

# Run only tests whose name matches a pattern
npx playwright test -g 'admin can delete'