Granit Recording

Record browser interactions with screenshots for Playwright script generation

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.