How do you install and configure Playwright in a TypeScript project?

The fastest path is npm init playwright@latest (or yarn create playwright). The interactive prompt asks:

• TypeScript or JavaScript.
• Test directory (default tests/).
• Whether to add a GitHub Actions workflow.
• Whether to install all browsers (default yes).

It generates playwright.config.ts, an example test, and .github/workflows/playwright.yml. Browsers are downloaded via npx playwright install.

Manual install (when integrating into an existing project):

npm install -D @playwright/test
npx playwright install
npx playwright install-deps   # Linux only — system libraries for Chromium/Firefox

Minimal playwright.config.ts:

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

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});

Useful first-run commands:

npx playwright test                       # all tests
npx playwright test --ui                  # interactive UI mode
npx playwright test tests/login.spec.ts   # one file
npx playwright test --headed              # see the browser
npx playwright show-report                # open the last HTML report
npx playwright codegen https://example.com # record interactions

Useful config keys worth knowing on day one: baseURL, trace, video, screenshot, retries, workers, reporter, projects. Each is documented inline; defineConfig gives you autocomplete.