YouTip

This chapter provides a detailed introduction to the various configurations in `playwright.config.ts`, allowing you to flexibly adjust test behavior according to project requirements. * * * ## Configuration File Overview `playwright.config.ts` is Playwright's central configuration file where all test run parameters are defined. ## Example // File path: playwright.config.ts import{ defineConfig, devices } from '@playwright/test'; export default defineConfig({ // ===== Basic Configuration ===== testDir:'./tests', fullyParallel:true, forbidOnly:!!process.env.CI, retries: process.env.CI?2:0, workers: process.env.CI?1:undefined, reporter:'html', timeout:30000, // ===== Global Shared Configuration ===== use:{ baseURL:'http://localhost:3000', trace:'on-first-retry', screenshot:'only-on-failure', video:'retain-on-failure', }, // ===== Multi-browser Projects ===== projects:[ { name:'chromium', use:{ ...devices['Desktop Chrome']}}, { name:'firefox',use:{ ...devices['Desktop Firefox']}}, { name:'webkit', use:{ ...devices['Desktop Safari']}}, ], // ===== Web Server ===== webServer:{ command:'npm run start', url:'http://localhost:3000', reuseExistingServer:!process.env.CI, }, }); * * * ## Basic Configuration Items | Configuration Item | Type | Default Value | Description | | --- | --- | --- | --- | | `testDir` | string | tests | Test file directory | | `fullyParallel` | boolean | false | Whether to run all tests in full parallel (including tests within the same file) | | `workers` | number | CPU cores/2 | Number of parallel workers | | `retries` | number | 0 | Number of retries for failed tests | | `timeout` | number | 30000 | Total timeout for each test (in milliseconds) | | `reporter` | string/array | list | Test reporter type | | `forbidOnly` | boolean | false | Fail if test.only() is detected on CI | | `testMatch` | string/RegExp | *.spec.(ts\|js) | Test file matching pattern | | `testIgnore` | string/RegExp | - | Ignored test file pattern | ### Configuration Example ## Example export default defineConfig({ // Find tests in the e2e directory testDir:'./e2e', // All tests run in full parallel fullyParallel:true, // Automatically assign worker count workers:undefined, // No retries on failure (local) / 2 retries (CI) retries: process.env.CI?2:0, // Use both CLI and HTML reporters reporter:[ ['list'], ['html',{ open:'never'}], ], }); * * * ## use Common Configuration Configurations in `use` apply to all tests and projects: | Configuration Item | Type | Description | | --- | --- | --- | | `baseURL` | string | Base URL, relative paths can be used in tests (e.g., `await page.goto('/login')`) | | `viewport` | {width, height} | Browser viewport size, default `{ width: 1280, height: 720 }` | | `locale` | string | Browser language, such as `'zh-CN'`, `'en-US'` | | `timezone` | string | Timezone, such as `'Asia/Shanghai'` | | `colorScheme` | string | Color scheme: `'light'`｜`'dark'`｜`'no-preference'` | | `geolocation` | {latitude, longitude} | Simulated geolocation | | `permissions` | string[] | Granted browser permissions (e.g., `['geolocation']`) | | `userAgent` | string | Custom User-Agent string | | `trace` | string | Trace collection strategy: `'on'`｜`'off'`｜`'on-first-retry'` | | `screenshot` | string | Screenshot strategy: `'on'`｜`'off'`｜`'only-on-failure'` | | `video` | string | Video recording strategy: `'on'`｜`'off'`｜`'retain-on-failure'` | | `storageState` | string | Authentication state file path | | `testIdAttribute` | string | Custom testId attribute name, default `'data-testid'` | | `actionTimeout` | number | Timeout for each action (click, fill) | | `navigationTimeout` | number | Timeout for each navigation | * * * ## webServer Configuration `webServer` configuration allows Playwright to automatically start your development server before running tests: ## Example export default defineConfig({ webServer:{ // Startup command command:'npm run dev', // Wait for this URL to be accessible before running tests url:'http://localhost:5173', // Timeout waiting time (milliseconds) timeout:120000, // Whether to reuse an already running server (reuse locally, restart on CI) reuseExistingServer:!process.env.CI, }, }); * * * ## globalSetup / globalTeardown Global Hooks Execute once before/after all tests run, suitable for database initialization and other operations. ## Example export default defineConfig({ globalSetup:'./global-setup.ts', globalTeardown:'./global-teardown.ts', }); ## Example // File path: global-setup.ts import{ FullConfig } from '@playwright/test'; async function globalSetup(config: FullConfig){ // Execute before all tests run console.log('Starting global setup...'); // For example: initialize test database, create test users, etc. } export default globalSetup;