What are Playwright projects and how do you configure them for multiple browsers?

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

export default defineConfig({
  testDir: './tests',

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

    // Mobile emulation
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },

    // Tablet
    {
      name: 'iPad',
      use: { ...devices['iPad Pro'] },
    },
  ],
});

projects: [
  // Staging tests
  {
    name: 'staging-chrome',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'https://staging.myapp.com',
    },
    testDir: './tests',
  },

  // Production smoke tests
  {
    name: 'prod-smoke',
    use: {
      ...devices['Desktop Chrome'],
      baseURL: 'https://myapp.com',
    },
    testDir: './tests/smoke',
  },
],

projects: [
  // Setup project — runs first, logs in
  {
    name: 'setup',
    testMatch: '**/*.setup.ts',
  },

  // Main tests — depend on setup
  {
    name: 'e2e',
    use: {
      ...devices['Desktop Chrome'],
      storageState: '.auth/user.json', // Login state from setup
    },
    dependencies: ['setup'],
  },

  // Admin tests with admin auth
  {
    name: 'admin',
    use: {
      ...devices['Desktop Chrome'],
      storageState: '.auth/admin.json',
    },
    dependencies: ['setup-admin'],
  },
],

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

# Run chromium and firefox
npx playwright test --project=chromium --project=firefox

# Run all projects
npx playwright test

export default defineConfig({
  // Shared by all projects
  use: {
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
    video: 'retain-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // Override just for chromium
        viewport: { width: 1920, height: 1080 },
      },
    },
    {
      name: 'mobile',
      use: {
        ...devices['Pixel 5'],
        // Mobile-specific overrides
      },
    },
  ],
});

# List all available devices
npx playwright show-devices
# iPhone 12, iPad Pro, Pixel 5, Galaxy S9+, etc.