UI + API Recorder

About

UI + API Recorder is a one-click capture tool for frontend, QA, and SDET engineers. Press Start once and get four artifacts in a single zip:

* Tab screen recording (video.webm)
* Network call timeline (events.json + api-details.json)
* UI action steps with role + accessible name (events.json)
* A ready-to-run Playwright spec (test.spec.ts)

All processed locally. Nothing is uploaded anywhere.

KEY FEATURES

* Playwright-codegen-grade selector priority
  testid -> role+name -> label -> placeholder -> text -> cssPath
  Generated spec is 100% compatible with @playwright/test.

* Hover-triggered popups and menus are captured (v0.3.1+)
  For "mouse over -> popup appears -> click menu item" flows, the hover step is recorded too, and the click carries a triggeredBy field so replay won't fail for missing hover.

* Honest single-tab recording UI (v0.3.2+)
  The recording tab shows a red dot badge; other tabs show a grey dot. The popup shows an orange warning if you're viewing a non-target tab.

* Per-artifact toggles
  Video, API, UI, Playwright spec each have their own switch. Output zip uses "<prefix>-<timestamp>" naming for easy archival.

* API filtering via include / exclude regex
  Capture only the endpoints you care about.

* Built-in timeline viewer (viewer.html)
  Open-and-play interactive viewer with API and UI events on one timeline. Zero external dependencies. Works offline.

USE CASES

* E2E test scaffolding - record manual flows, let your agent or yourself fill in the assertions
* Frontend-backend handoff - see exactly which click triggered which API call
* Bug reproduction - ship one zip with video + network + steps to your colleague
* API contract review - keep the request/response trail for review

PRIVACY AND SECURITY

* 100% local processing, zero outbound network requests from the extension
* Does not read browser history, bookmarks, passwords, or cookies
* Recording only runs while you explicitly press Start
* No analytics SDK, no ads, no telemetry
* Open source and auditable

See the Privacy practices tab for the full policy.

INCOGNITO SUPPORT

Supports incognito (split) mode - recordings made in incognito stay in incognito; the extension cannot read data across the regular/incognito boundary.

SYSTEM REQUIREMENTS

* Chromium 109+ (Chrome, Edge, Brave, Arc, etc.)
* No external services required

OPEN SOURCE AND FEEDBACK

Source code and issue tracker: <https://github.com/DingXiaoXiao/ui-api-recorder>