Generate a Playwright repro from a real browser session

What you’ll end up with

A .spec.ts file in your repo with the exact click sequence, form input, and waits you just performed — derived from peek’s user-action timeline, not hand-typed. Run it with npx playwright test to confirm the bug is captured.

Generated Playwright spec next to the peek session it came from

Prerequisites

A recent install of Claude Code (CLI or VS Code extension) or Cursor with MCP enabled
Chrome with the peek extension installed — from the Chrome Web Store, or loaded unpacked from packages/peek-extension/chrome-mv3/ for local builds
Playwright installed in your repo (npm i -D @playwright/test)

Steps

1. Install peek

npm i -g @peekdev/cli
peek init

peek init writes the MCP server entry into ~/.claude.json (and offers to do the same for Cursor / Windsurf if it detects them).

2. Capture the bug

Open the broken page in Chrome. Click the peek toolbar icon → Capture this tab. Reproduce the bug end-to-end — click the buttons, fill the forms, watch it fail. Stop the capture.

3. Ask your agent to generate the spec

In Claude Code or Cursor:

Take my most recent peek session and call generate_playwright_repro on it. Save the output to tests/e2e/regression-place-order.spec.ts.

The agent calls list_recent_sessions to find the latest session ID, then generate_playwright_repro with that session — peek returns a .spec.ts body assembled from the recorded user actions and network expectations.

4. Run it

npx playwright test tests/e2e/regression-place-order.spec.ts

The spec should reproduce the bug. Commit it as your regression test.

Why this works

peek’s recorder timestamps every meaningful user action — clicks, key presses, form submits — and pairs them with the network calls each one triggers. generate_playwright_repro walks that timeline and emits a deterministic test that asserts the same call shape your real session produced.