Real-time browser test recorder

The problem

Writing test scripts manually means mapping DOM selectors, coding every interaction, and updating scripts whenever the UI changes. Every automation vendor had the same approach: record clicks on the rendered page. The result was selector-based output that broke on any UI change.

The root problem was working at the wrong layer of abstraction — the DOM surface — rather than the browser's internal event model. At the DOM layer, you only see what the page renders. You miss the events Chrome itself is responding to.

What I built

Built a real-time recorder that embeds directly into Chrome using the Chrome DevTools Protocol over WebSocket. Every user action — clicks, typing, navigation, form interactions — is captured as a replayable test step in real time, without any DOM selectors or scripting framework.

The core browser controller is written in pure JavaScript ES6 modules, designed to be integrated into any application. View JSON (ACCELQ's element snapshot format) is calculated asynchronously in a parallel worker thread — 700–900 ms for typical 20–30k element pages, 15 seconds for extreme 1,30,000-element pages — without impacting the user's recording experience.

Integrated with Live Playback to give immediate feedback on each recorded step. Designed around ACCELQ's existing views/context/action model so it feels native to existing users.

Approaches considered

Architecture

Result