StepRecorder — Record & Replay Browser Steps di Vietcodex

Turn a click-through into a replayable test — no code, no CLI.

StepRecorder records the interactions you perform on a page as a numbered, editable step list, replays them to verify they work, and exports a clean Playwright or Cypress test — plus a numbered screenshot strip. Everything happens in a sidebar; no terminal, no codegen command, no setup.

What it records

Clicks, typing, <select> dropdowns, checkboxes & radios, Enter-to-submit, and navigations.
Elements inside web-component shadow DOM (captured via composedPath, replayed by piercing open shadow roots).
Robust selectors (data-testid → id → name → aria-label → CSS path), each with a fallback chain.
Replay that doesn't flake

Re-runs your steps on the page, waiting for each element to appear before acting.
Evaluates your assertions and tells you what passed.
Assertions built in

Click any element to assert it's visible, contains the right text, or that the URL is correct.
Your export becomes a real test with expect(...) / .should(...) — not just a click log.
Export clean code

Playwright (free): idiomatic getByRole(role, { name }) locators, setChecked, fill, and assertions that run in CI without cleanup.
Cypress and raw JSON export (Pro).
Numbered screenshot strip (Pro): one PNG with a captioned screenshot per step — for bug reports, docs, and onboarding.
Privacy-first

Passwords, card/CVV/OTP fields, and secret tokens in URLs are masked automatically before a step is stored, shown, exported, or replayed.
Recordings stay on your device — nothing is uploaded.
Free vs Pro

Free: unlimited steps, in-tool assertions, single-page replay, Playwright export.
Pro ($49, one-time): Cypress & JSON export, the numbered screenshot strip, and seamless cross-page replay. Lifetime updates, up to 3 devices.
Not affiliated with or endorsed by Microsoft (Playwright), Cypress.io, Google, or any site whose scripts it detects.