Before the workshop — get Playwright running

Hello! 👋

Welcome — really glad you're joining us. The workshop is one full day of hands-on Playwright across twelve focused blocks, including four 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 ensures browsers are installed, dependencies are downloaded, and the CLI + MCP server we'll need for the AI blocks are ready to go. 🫣

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
• ~2 GB free disk space — Playwright bundles Chromium, Firefox, and WebKit

Check your Node.js version

$ node --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, ...).

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

$ npx playwright --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:

$ npx playwright test

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 — 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
$ playwright-cli --help

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

$ playwright-cli install --skills

Quick smoke test — this should pop a headed browser and print an accessibility snapshot:

$ playwright-cli open https://playwright.dev --headed

Step 5 — Install the Playwright MCP server

TODO check what to do with this?

We'll use the Playwright MCP server in Blocks 10–12 to let Claude Code (or any MCP-capable client) drive a real browser through a Model Context Protocol connection.

You don't need to install the package manually — npx will fetch it on first run. You do need to register it with your MCP client.

Claude Code CLI

$ claude mcp add playwright npx @playwright/mcp@latest

VS Code

$ code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Any MCP client (Cursor, Claude Desktop, Zed, …)

Drop this into the client's MCP config file (e.g. ~/.cursor/mcp.json, .mcp.json in a project, or claude_desktop_config.json):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Restart the client and confirm the playwright server shows up in its MCP/tools panel. When you first use it, npx downloads @playwright/mcp and the browser it needs — give it a minute.

Step 6 — 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.

TODO add an LLM / AI note

...

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

You're done!

Tick these off and you're ready for May 5:

See you on workshop day. 🎭