Playwright Cheatsheet

Setup

Use this Playwright reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

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',
});