Multi-Project Config

mkdir architect-01-projects
cd architect-01-projects
npm init playwright@latest -- --lang=ts --quiet

rm tests/example.spec.ts
rm -rf tests-examples

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

// TARGET_ENV lets you pick an environment from the shell instead of a flag.
// Example: TARGET_ENV=staging npx playwright test
const TARGET_ENV = process.env.TARGET_ENV;

// Per-environment settings. In a real project these would come from a
// secrets manager or .env files — here we hard-code public URLs.
const envs = {
  dev: {
    baseURL: 'https://example.com',
    timeout: 10_000,
    retries: 0,
  },
  staging: {
    baseURL: 'https://playwright.dev',
    timeout: 20_000,
    retries: 1,
  },
  prod: {
    baseURL: 'https://www.saucedemo.com',
    timeout: 30_000,
    retries: 2,
  },
} as const;

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  reporter: [['list'], ['html', { open: 'never' }]],

  // If TARGET_ENV is set, only run the matching project. Otherwise all three
  // are available and you can pick with `--project=dev|staging|prod`.
  projects: [
    {
      name: 'dev',
      use: { ...devices['Desktop Chrome'], baseURL: envs.dev.baseURL },
      timeout: envs.dev.timeout,
      retries: envs.dev.retries,
    },
    {
      name: 'staging',
      use: { ...devices['Desktop Chrome'], baseURL: envs.staging.baseURL },
      timeout: envs.staging.timeout,
      retries: envs.staging.retries,
    },
    {
      name: 'prod',
      use: { ...devices['Desktop Firefox'], baseURL: envs.prod.baseURL },
      timeout: envs.prod.timeout,
      retries: envs.prod.retries,
    },
  ].filter(p => !TARGET_ENV || p.name === TARGET_ENV),
});

import { test, expect } from '@playwright/test';

test.describe('dev smoke', () => {
  test('home page loads and shows heading', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle(/Example Domain/);
    await expect(page.getByRole('heading', { level: 1 })).toHaveText('Example Domain');
  });

  test('more information link is reachable', async ({ page }) => {
    await page.goto('/');
    const link = page.getByRole('link', { name: /More information/i });
    await expect(link).toBeVisible();
  });
});

import { test, expect } from '@playwright/test';

test.describe('staging smoke', () => {
  test('landing page renders the hero', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle(/Playwright/);
    await expect(page.getByRole('heading', { name: /Playwright enables reliable/i })).toBeVisible();
  });

  test('docs link navigates to docs root', async ({ page }) => {
    await page.goto('/');
    await page.getByRole('link', { name: 'Docs', exact: true }).first().click();
    await expect(page).toHaveURL(/\/docs\//);
  });
});

import { test, expect } from '@playwright/test';

test.describe('prod smoke', () => {
  test('login page shows credentials panel', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('#login_credentials')).toBeVisible();
  });

  test('standard user can sign in', async ({ page }) => {
    await page.goto('/');
    await page.fill('#user-name', 'standard_user');
    await page.fill('#password', 'secret_sauce');
    await page.click('#login-button');
    await expect(page).toHaveURL(/inventory\.html/);
    await expect(page.locator('.inventory_list')).toBeVisible();
  });
});

# Run everything — all three projects
npx playwright test

# Run a single project by flag
npx playwright test --project=staging

# Run two projects by flag
npx playwright test --project=dev --project=staging

# Run a single project by env var (useful in CI)
TARGET_ENV=prod npx playwright test       # macOS / Linux
$env:TARGET_ENV="prod"; npx playwright test   # Windows PowerShell

Running 2 tests using 2 workers

  ✓  [staging] › staging.spec.ts:4:7 › staging smoke › landing page renders the hero (1.3s)
  ✓  [staging] › staging.spec.ts:10:7 › staging smoke › docs link navigates to docs root (1.7s)

  2 passed (3.2s)

To open last HTML report run:

  npx playwright show-report