Playwright Cheatsheet

Setup

Use this Playwright reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Playwright cheatsheet for JavaScript and TypeScript

Playwright is an end-to-end testing framework for web apps. The examples below use TypeScript because it is the default for modern Playwright projects.

Installation

npm init playwright@latest
# Installs Playwright, generates playwright.config.ts, example tests

npm install --save-dev @playwright/test
npx playwright install            # download all default browsers
npx playwright install chromium   # single browser
npx playwright install --with-deps chromium  # + OS libs (CI)

Browser types

Constant	Engine
`chromium`	Chromium (Chrome/Edge)
`firefox`	Firefox
`webkit`	WebKit (Safari)

Project structure (generated)

playwright.config.ts
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

Running tests

npx playwright test                      # all tests, all browsers
npx playwright test tests/foo.spec.ts    # single file
npx playwright test -g "login"           # filter by title
npx playwright test --project=chromium   # single browser project
npx playwright test --headed             # visible browser
npx playwright test --debug              # open Playwright Inspector
npx playwright test --ui                 # open interactive UI mode
npx playwright test --reporter=html      # generate HTML report

Repeat / shard

npx playwright test --repeat-each=3          # flaky-test detection
npx playwright test --shard=1/4              # CI parallel sharding

Viewing reports

npx playwright show-report                   # open last HTML report
npx playwright show-trace trace.zip          # open a saved trace

Updating Playwright

npm install --save-dev @playwright/test@latest
npx playwright install                       # re-download browsers

VS Code extension

Install Playwright Test for VSCode (ms-playwright.playwright).

Run/debug tests from the Test Explorer sidebar.
Pick locator button opens a live selector inspector.
Record new records a fresh spec from browser interactions.
Record at cursor inserts actions into an existing test.

CI quick-start (GitHub Actions)

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Environment variables

Variable	Purpose
`CI=true`	Detected by Playwright; changes defaults (no `--headed`, retries 2)
`PWDEBUG=1`	Same as `--debug`
`PWDEBUG=console`	Verbose console mode
`PLAYWRIGHT_BROWSERS_PATH`	Override browser install directory
`PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1`	Skip download (use system)

TypeScript configuration

Playwright transpiles TypeScript out of the box but performs no type-checking — run tsc --noEmit as a separate CI step. Path aliases from tsconfig.json are resolved automatically in test files:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["./tests/pages/*"],
      "@fixtures/*": ["./tests/fixtures/*"]
    }
  }
}

// tests/login.spec.ts — alias resolved via tsconfig paths
import { LoginPage } from '@pages/LoginPage';

A tsconfig.json inside the test directory takes precedence over the root one. To force a single tsconfig for all tests (v1.49+):

// playwright.config.ts
export default defineConfig({
  tsconfig: './tsconfig.test.json',
});