How do you run tests across multiple browsers?

The Answer

Define 'projects' in `playwright.config.ts`, each targeting a different browser or device. A single `npx playwright test` command will run all tests across all configured projects.

Deep Dive Explanation

Playwright includes 50+ pre-configured device descriptors (via `devices`) that set the correct viewport, user-agent, and deviceScaleFactor. Chromium covers Chrome and Edge, WebKit covers Safari (including iOS Safari emulation), and Firefox covers Firefox.

example.spec.ts

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

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

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

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

// Run only a specific project
// npx playwright test --project=Chrome
// npx playwright test --project="Mobile Safari"