playwright.config & Projects (Cross-Browser & Devices)

📌 Definition:

📖 Detailed Explanation:

Projects are the key concept. Each project is a named configuration with its own use options and can depend on other projects. This is how you run the same tests on Desktop Chrome, Firefox, WebKit and emulated mobile devices (devices['Pixel 7'], devices['iPhone 14']) from one command, and how you wire an auth 'setup' project as a dependency so login runs first. Shared options live under top-level use (baseURL so tests navigate with relative paths, trace/screenshot policies, default viewport, locale, timezone). Because config is code, you can branch on process.env.CI for retries and reporters. Good config is a large part of a suite's quality: it encodes cross-browser coverage, artifact capture, and environment targeting in one reviewable file.

🔑 Key Points:

• Projects = named run configs; run cross-browser and emulated-device coverage from one suite
• Project dependencies wire setup (e.g. auth) to run before dependent projects
• Shared use options: baseURL, trace, screenshot, viewport, locale, timezone
• baseURL enables relative navigation (page.goto('/login'))
• Config is code — branch on process.env.CI for retries/reporters/workers

🌍 Real-World Example:

📎 Code Example:

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

export default defineConfig({
  use: { baseURL: process.env.BASE_URL ?? 'https://www.qapractice.com', trace: 'on-first-retry' },
  reporter: process.env.CI ? [['blob'], ['github']] : [['html']],
  projects: [
    { name: 'setup', testMatch: /auth\.setup\.ts/ },
    { name: 'chromium', use: { ...devices['Desktop Chrome'], storageState: 'auth/user.json' }, dependencies: ['setup'] },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'], storageState: 'auth/user.json' }, dependencies: ['setup'] },
    { name: 'webkit',   use: { ...devices['Desktop Safari'],  storageState: 'auth/user.json' }, dependencies: ['setup'] },
    { name: 'mobile-chrome', use: { ...devices['Pixel 7'], storageState: 'auth/user.json' }, dependencies: ['setup'] },
  ],
});