Record a live browser workflow and generate a replayable TypeScript script.

Start Recording

npx opensteer record --workspace demo --url https://example.com

Opens a headed browser. Interact normally — clicks, typing, scrolling, navigation are all captured.

Stop Recording

Click the Stop recording button in the browser. The recorder generates a TypeScript replay script.

Output

Saved to .opensteer/workspaces/<workspace>/recorded-flow.ts.

Example generated script:

import { Opensteer } from "opensteer";

const os = new Opensteer({ workspace: "demo", browser: "persistent" });
await os.open("https://example.com");
await os.click({ selector: "#search-input" });
await os.input({ selector: "#search-input", text: "laptops" });
await os.click({ selector: "button[type=submit]" });
await os.close();

What Gets Recorded

• Click events (with CSS selector targets)
• Double-click events
• Text input (keystrokes consolidated into input actions)
• Special key presses (Enter, Tab, Escape)
• Select/dropdown value changes
• Scroll events
• Page navigation
• Same-document navigation
• Tab switches

What Doesn't Get Recorded

• Cross-origin iframes
• Shadow DOM interactions (best-effort selectors)
• Canvas interactions

Cloud Recording

Record against a cloud browser session:

npx opensteer record --workspace demo --url https://example.com --provider cloud

Cloud recordings generate scripts that bootstrap with provider: "cloud".

Best Practices

• Use recording for initial exploration, then refine the generated script
• Replace CSS selectors with description-based selectors for reliability
• Add explicit waits for dynamic content
• Test the generated script before deploying