How do you manage environment-specific configs?

The Answer

Use environment variables combined with `playwright.config.ts` to configure base URLs, credentials, and settings per environment (local, staging, production).

Deep Dive Explanation

Never hardcode URLs or credentials in test files. Always use environment variables. Add `.env` files to `.gitignore` and store secrets in CI secret managers (GitHub Secrets, AWS SSM, etc.). The `baseURL` config option enables using relative URLs like `page.goto('/dashboard')` instead of absolute URLs in tests.

example.spec.ts

// playwright.config.ts
export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    extraHTTPHeaders: {
      'X-API-Key': process.env.API_KEY || '',
    },
  },
});

// .env.staging
// BASE_URL=https://staging.myapp.com
// API_KEY=staging-key-xyz

// .env.production
// BASE_URL=https://myapp.com
// API_KEY=prod-key-xyz

// Run with specific env:
// BASE_URL=https://staging.myapp.com npx playwright test

// Use dotenv for .env files
// npm install dotenv
// require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` });