Guide · framework-agnostic
Record a video with Playwright — without the script
PR Preview runs on the Playwright engine, so it drives a real Chrome across any framework. But you never write a selector: describe the flow in plain English and Claude Code drives it, or click through it yourself. Out comes a captioned before/after MP4 for your PR.
npm i -D @qwertybit/pr-previewThe difference
A Playwright script vs one PR Preview prompt
Raw Playwright is a testing framework: you write and maintain a script for every flow. PR Preview keeps the reliable engine and drops the authoring.
// raw Playwright: a script you write and maintain
import { test } from '@playwright/test';
test('add to cart', async ({ page }) => {
await page.goto('http://localhost:3000');
await page.getByRole('link', { name: 'Books' }).click();
await page.getByRole('button', { name: 'Add to cart' }).first().click();
await page.getByRole('link', { name: 'Checkout' }).click();
// …and keep every selector in sync with the UI, forever
});No selectors, no waits, nothing to keep in sync with the UI. Claude reads the page and drives it; PR Preview records the real session and writes before.mp4 + after.mp4.
Get a clip
Record a video in four steps
Works with React, Vue, Svelte, Angular or plain HTML — it drives your real dev server, so there's no framework-specific setup.
- 01
Install PR Preview and a browser
Add the dev dependency and download Chromium once. PR Preview bundles the Playwright engine — you don't write any Playwright code.
$npm i -D @qwertybit/pr-preview && npx playwright install chromium - 02
Connect it (optional, for agent mode)
Run init to register the MCP server so Claude Code can drive the recording from a prompt.
$npx pr-preview init - 03
Describe the flow — no selectors
Tell Claude Code the journey in plain English, or run it and click through yourself. No page.locator(), no waits, no script to keep in sync with the UI.
- 04
Get a captioned before/after MP4
PR Preview records the real session and writes before.mp4 / after.mp4 — captioned with branch and timestamp, sized to drop into a pull request.
Playwright & PR Preview — questions
Do I need to know Playwright to use PR Preview?
No. PR Preview uses Playwright internally to drive a real Chrome, but you never write a script or a selector. You describe the flow in plain English (agent mode) or click through it yourself (manual mode).
How is this different from Playwright's built-in video recording?
Playwright's recordVideo captures a test run you had to script. PR Preview adds everything around it: no script (agent-driven or by hand), a captioned before/after against the base branch, a GIF fallback, tiny PR-ready MP4s, and one-prompt PR creation.
Does it replace my Playwright end-to-end tests?
No — it's complementary. Your e2e suite verifies behavior; PR Preview produces a visual before/after clip for human reviewers. It's a recorder for pull requests, not a test runner.
Which frameworks does it work with?
Any web app you can open in a browser — React, Vue, Svelte, Angular, plain HTML, SSR or SPA. It drives your real dev server, so there's no framework-specific setup.
Can it run headless in CI?
The recorder opens a real Chrome to capture the journey. Agent-driven recording is designed to run from Claude Code locally; the clips and config are plain files you can commit and reference from CI.
Be first to PR Preview for Teams
The CLI is free today. Join the list to get hosted clips, team reviews, and sharing the moment they ship — and help shape what we build.
Just want the CLI? Install it free · Star on GitHub