Playwright Setup

Installing Playwright

The fastest path is npm init playwright@latest, which scaffolds config, example tests, and a GitHub Actions workflow. Alternatively, add @playwright/test manually and run npx playwright install to download Chromium, Firefox, and WebKit.

Playwright bundles its own browser builds for consistency across machines — your local Chrome version does not need to match CI.

npm init playwright@latest
# or manually:
npm install -D @playwright/test
npx playwright install

playwright install downloads browser binaries. Use playwright install --with-deps on Linux CI for system libraries.

Common Setup Commands

npx playwright test              # run all tests headless
npx playwright test --ui         # interactive UI Mode
npx playwright test --headed     # show browser window
npx playwright test login.spec.ts
npx playwright show-report       # open HTML report

• playwright test is the primary command for local runs and CI.
• --ui opens UI Mode for time-travel debugging.
• --project=chromium runs only tests configured for that browser project.
• show-report opens the last HTML report after a run.

Setup Command Reference

Commands you will run while setting up and using Playwright locally.

Understanding playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
});

Setting baseURL lets you write page.goto('/login') instead of full URLs.

Caching Browsers in CI

Browser binaries live under ~/.cache/ms-playwright. Cache this directory in CI alongside node_modules to avoid re-downloading on every pipeline run.

• Run npx playwright install --with-deps in CI before tests.
• Pin @playwright/test version in package.json for reproducible builds.
• Use npx playwright install chromium if you only need one engine in CI.

Common Mistakes

• Running tests without playwright install, causing 'Executable doesn't exist' errors.
• Not installing system dependencies on Linux CI (install-deps).
• Hardcoding full URLs everywhere instead of configuring baseURL.
• Committing test-results/ or playwright-report/ instead of adding them to .gitignore.

Key Takeaways

• npm init playwright@latest scaffolds a complete TypeScript project.
• playwright install downloads consistent browser binaries for all environments.
• playwright.config.ts centralizes base URL, retries, tracing, and projects.
• Cache browser binaries in CI for faster pipelines.