Granit Recording

About

Writing Playwright tests is tedious. You have to manually inspect elements, figure out selectors, and guess at the right sequence of actions. Granit Recording does the hard part for you.

What it does

Granit Recording is a developer tool that records your browser interactions and exports them as structured data you can use to generate Playwright automation scripts.

Click "Start Recording," use any website normally, then click "Stop & Download." That's it. You get a ZIP file containing:

A recording.json file with every interaction (clicks, form inputs, keyboard shortcuts, scrolls, page navigations) timestamped and annotated with element selectors, attributes, and coordinates
A screenshots/ folder with a PNG screenshot captured after each significant action
DOM snapshots of the page at key moments, giving you the full HTML context needed to build reliable selectors
Who it's for

QA engineers building end-to-end test suites with Playwright
Developers who want to bootstrap test scripts instead of writing them from scratch
Teams that use AI-assisted code generation and need structured browser recordings as input
What gets captured

Clicks — element selector, position, surrounding HTML context
Form changes — input values, select options, checkboxes
Keyboard input — special keys (Enter, Tab, Escape, arrow keys) and modifier combinations (Ctrl, Cmd, Shift, Alt)
Scrolling — debounced scroll position tracking
Page navigations — URL changes with automatic re-injection, so recording continues seamlessly across pages
Every action includes the target element's tag, ID, classes, ARIA attributes, data-testid, computed selector, and bounding rectangle. This gives you (or your script generator) everything needed to produce stable, maintainable Playwright locators.

How the selectors work

Granit Recording builds selectors the same way a developer would:

First checks for data-testid (best practice for test automation)
Then tries element ID
Falls back to a combination of tag, role, aria-label, name, type, and href attributes
Uses nth-of-type only when needed to disambiguate siblings
Walks up the DOM tree until the selector is unique
This produces readable, resilient selectors — not brittle auto-generated XPaths.

What makes it different

DOM snapshots, not just events: Each recording includes lightweight HTML snapshots (scripts, styles, and SVGs stripped out) so your script generator has full page context, not just a flat event log
Screenshots for visual debugging: Every click and navigation is paired with a PNG screenshot, so you can visually verify what happened at each step
One-click workflow: No configuration, no setup, no account required. Start, interact, stop, done.
Structured JSON output: The recording.json format is designed to be machine-readable, making it straightforward to feed into Playwright code generators or LLMs
Privacy

Granit Recording runs 100% locally in your browser. No data is ever sent to any server. Recordings are stored in memory during a session and saved to your local file system as a ZIP download. There is no analytics, no telemetry, and no third-party code. See our privacy policy for full details.

How to use it

Click the Granit Recording icon in your toolbar
Name your recording (optional)
Click "Start Recording" — the icon shows a red "REC" badge
Use the website as you normally would
Click the icon again and hit "Stop & Download"
A ZIP file is saved to your downloads folder, ready to use
The extension works on any website. Recording continues across page navigations within the same tab.