Problem Statement
Currently, users must describe tests in plain English and let the pipeline generate everything from scratch. But sometimes it's faster to just click through the app and have the system learn from it.
Playwright's built-in codegen records clicks but produces brittle selectors and zero assertions — it's a starting point at best.
Proposed Solution
Add a Record Mode to Specter. The user clicks through their app manually, and the system:
- Captures every action (click, fill, select, navigate) with DOM snapshots
- Feeds the recording buffer into a new
recordingAnalyst agent that groups raw events into logical test scenarios
- Pipes those scenarios through the existing
scenarioWriter → scriptWriter pipeline to enrich them with assertions, edge cases, and self-healing selectors
Architecture
User clicks in browser ↓ browserExecutor (mode: 'record') → captures {action, target, selector, timestamp, domSnapshot} ↓ Recording Buffer (in-memory array) ↓ recordingAnalyst agent → groups raw steps into logical scenarios ↓ scenarioWriter → enriches with assertions + validation ↓ scriptWriter → generates executable steps
Implementation Notes
browserExecutor.js already attaches page.on('console'), page.on('requestfailed'), page.on('response') listeners. Adding page.on('click'), page.on('input') in a mode: 'record' branch is natural.- New file:
agents/recordingAnalyst.js — converts raw DOM events into structured scenarios
- UI needs a "Record" toggle button next to the existing "RUN AGENT" button
- Recording buffer should be capped (e.g., 200 actions max) to prevent memory issues
Which Agent / Component Does This Affect?
Problem Statement
Currently, users must describe tests in plain English and let the pipeline generate everything from scratch. But sometimes it's faster to just click through the app and have the system learn from it.
Playwright's built-in
codegenrecords clicks but produces brittle selectors and zero assertions — it's a starting point at best.Proposed Solution
Add a Record Mode to Specter. The user clicks through their app manually, and the system:
recordingAnalystagent that groups raw events into logical test scenariosscenarioWriter → scriptWriterpipeline to enrich them with assertions, edge cases, and self-healing selectorsArchitecture
User clicks in browser ↓ browserExecutor (mode: 'record') → captures {action, target, selector, timestamp, domSnapshot} ↓ Recording Buffer (in-memory array) ↓ recordingAnalyst agent → groups raw steps into logical scenarios ↓ scenarioWriter → enriches with assertions + validation ↓ scriptWriter → generates executable steps
Implementation Notes
browserExecutor.jsalready attachespage.on('console'),page.on('requestfailed'),page.on('response')listeners. Addingpage.on('click'),page.on('input')in amode: 'record'branch is natural.agents/recordingAnalyst.js— converts raw DOM events into structured scenariosWhich Agent / Component Does This Affect?
recordingAnalyst.jsagent