Before the workshop — get Playwright running

Hello! 👋

Welcome — really glad you're joining us. The workshop is one full day of hands-on Playwright, including five blocks on AI-assisted testing.

We'll spend the day writing tests against the ecommerce site you're on right now.

This prep lesson takes about 20 minutes. Please run through it before the workshop. It installs browsers, pulls dependencies, and gets the CLI ready for the AI blocks.

What you'll need

A laptop with:

• Node.js — latest 20.x, 22.x, or 24.x (Playwright's official requirements)
• A code editor — VS Code is what I'll use in demos, but anything else works, too
• A terminal
• ~1.5 GB free disk space — Playwright bundles Chromium, Firefox, and WebKit

Check your Node.js version

v22.11.0

Anything v20.x or newer is fine. If you're on v18 or older, install a current LTS via nodejs.org or your version manager of choice (nvm, fnm, volta, …).

Install Playwright

Step 1 — Create a fresh Playwright project

Pick (or create) an empty directory and run:

$ mkdir pwt-workshop && cd pwt-workshop
$ npm init playwright@latest

You'll get a few prompts. Pick these answers:

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

This downloads Chromium, Firefox, and WebKit (the bundled, version-pinned builds Playwright tests against).

When it finishes, you should see a fresh project with:

.
├── node_modules/
├── tests/
│   └── example.spec.ts
├── package.json
├── package-lock.json
└── playwright.config.ts

Step 2 — Confirm the version

Version 1.59.1

Anything 1.59.x or newer is what we need. If you're on an older version, re-run the init in a fresh directory.

Step 3 — Run the example tests

Playwright ships an example.spec.ts in tests/. Run it with the default test command:

Running 6 tests using 5 workers
  6 passed (3.6s)

To open last HTML report run:

  npx playwright show-report

Six green tests across three browsers — that's the baseline. If you see this, your environment is ready. 🎉

If something fails, the most common causes are:

• Browser download incomplete — re-run npx playwright install
• Old Node.js — check node --version (need 20.x or newer)

Step 4 — See what the tests are doing

Headless tests are fast but invisible. Open a real browser to watch them run:

$ npx playwright test --headed

Then try the UI mode — this is the tool we'll live in during the workshop:

$ npx playwright test --ui

UI mode gives you time-travel debugging, a locator picker, network inspection, and watch mode. It's the single best reason to use Playwright — we'll spend real time here from the very first lesson.

Using Playwright with AI

Don't have a coding agent yet? Claude Code is the one we'll use in demos. The free tier might work for the workshop, but you'll likely hit its token limits quickly. Sign up for one of the smaller paid tiers if possible.

Install the Playwright CLI

We'll use @playwright/cli later in the workshop to have an AI coding agent drive the browser and write tests for us. It's published by the Playwright team and exposes Playwright as a token-efficient CLI surface that agents (Claude Code, Copilot, …) can call as tools.

Install it globally so the playwright-cli binary is on your PATH:

$ npm install -g @playwright/cli@latest

Confirm it's on your PATH:

playwright-cli - run playwright mcp commands from terminal

Usage: playwright-cli <command> [args] [options]
Usage: playwright-cli -s=<session> <command> [args] [options]

Core:
  open [url]                  open the browser
  attach [name]               attach to a running playwright browser
  close                       close the browser

...

Then install the agent skills (a small set of instructions your coding agent reads to understand how to use the CLI):

✅ Workspace initialized at `/private/tmp/pwt-dry-run`.
✅ Skills installed to `.claude/skills/playwright-cli`.
✅ Found chrome, will use it as the default browser.

Quick smoke test — this should pop a headed browser and print the following:

### Browser `default` opened with pid 98274.
### Ran Playwright code
```js
await page.goto('https://playwright.dev');
```

### Page
- Page URL: https://playwright.dev/
- Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright

### Snapshot
- [Snapshot](.playwright-cli/page-2026-05-02T12-39-03-711Z.yml)

Day-of checklist

On workshop day, please bring:

• Power adapter — a full day of testing drains a battery
• Your laptop with the prep above completed
• An open mind — if you've used Cypress / Selenium / Puppeteer, some habits will serve you and some won't

See you on workshop day. 🎭