Media
2 items
Description
Records browser interactions for Playwright test generation Page Rec turns real browser interactions into runnable Playwright tests — without a CLI, a server, or any build step. Open the Side Panel on any https page, click Start, interact normally (click, type, scroll, navigate), click Stop, then Copy Code or Download .spec.js. That's the whole flow. ━━━ What it does ━━━ • Captures clicks, typed input, scrolls, form submissions, and full-page navigations. • Follows the active tab across navigations — multi-page recordings survive link clicks and form submits. • Renders every action as a color-coded node on a vertical timeline: indigo for clicks, amber for typing, emerald for navigation, slate for scrolls. • Lets you edit recordings before export: drag nodes to reorder, click the action line or selector to edit in place, delete unwanted steps, add free-form notes between steps, or hit ↺ Reset Edits to restore the originals. • Exports a clean Playwright .spec.js — locator preference order: data-testid → #id → [name=…] → [aria-label=…] → tagName.firstClass → the recorded selector as-is. • Masks passwords automatically: <input type="password"> values are captured as <password> and replaced with a // TODO: fill in real password placeholder in the exported spec. Raw password values are never stored or exported. ━━━ What it doesn't do ━━━ • No backend. No cloud. No account. No network requests. Everything runs in your browser. • No tracking, analytics, or telemetry. • No reading of tabs you didn't explicitly start recording on. • Does not bundle Playwright itself — it only generates the .spec.js text. Run it in your target project with `npm install -D @playwright/test && npx playwright test my-recording.spec.js`. ━━━ Who it's for ━━━ QA engineers, frontend developers, and SDETs who want to skip the "write a selector, reload, check it works, repeat" loop when authoring Playwright tests. Also handy for bug reports: record the repro, paste the spec in the ticket. ━━━ How to use ━━━ 1. Click the Page Rec icon in the Chrome toolbar. The Side Panel opens with a terminal-style prompt: `> Waiting for recording to start..._` 2. Navigate to any https page. 3. Click Start recording. The status dot turns green and pulses. 4. Interact with the page. Each event lands as a node on the Timeline. 5. Click Stop Recording. The dashed flow line solidifies — review mode. 6. Switch to the Step editor tab to polish the steps. 7. Click Copy Code or ⬇ .spec.js to export. ━━━ Requirements ━━━ Google Chrome 114+ (Side Panel API). ━━━ Open source ━━━ Source code, issues, and release history: https://github.com/wahengchang/page-rec