How to Use the Recorder Panel in Google Chrome DevTools to Record and Automate User Flows

Modern web application quality assurance requires verifying critical user pathways, such as customer checkout funnels, registration flows, and multi-step forms. Traditionally, writing end-to-end automation scripts demanded configuring standalone testing frameworks like Puppeteer, Cypress, or Selenium from scratch. Built directly into Google Chrome, the Recorder panel in Chrome DevTools allows developers, QA engineers, and site owners to record user interactions in real time, replay them at variable network speeds, measure web performance profiles across each step, and export tests directly into automation code.

What the Chrome DevTools Recorder Panel Does

The Recorder panel captures DOM events and translates them into an interactive timeline of structured steps:

• Interaction Capture: Tracks mouse clicks, keyboard text input, drop-down selections, element navigations, and scrolling actions.
• Intelligent Selector Generation: Generates resilient CSS selectors, ARIA roles, text selectors, and XPath selectors to ensure tests survive minor UI updates.
• Performance Profiling: Integrates directly with the DevTools Performance panel to record CPU, network waterfall, and Core Web Vitals (LCP, CLS, INP) during each step of the user journey.
• Code Export: Exports recorded user flows into standard JSON, Puppeteer scripts, Cypress tests, WebdriverIO files, and Lighthouse user flow reports.

Opening the Recorder Panel

The Recorder panel is built into all desktop versions of Google Chrome:

1. Open Google Chrome and navigate to the web page or application you want to test.
2. Open DevTools by pressing F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Opt + I on macOS).
3. Click the More tabs button (the + or three vertical dots icon in the DevTools toolbar) and select Recorder.

Recording a New User Journey

To record a test flow from scratch:

1. In the Recorder panel, click the Create a new recording button.
2. Enter a descriptive name for your user flow in the Recording name field (e.g. E-Commerce Checkout Flow).
3. In the Selector attribute field, enter custom testing attributes if your application uses them (such as data-testid or data-cy). DevTools will prioritize these resilient attributes over standard CSS classes.
4. Click Start recording at the bottom of the dialogue.
5. Interact with your website normally: click links, fill in text fields, submit forms, or add items to an online cart. DevTools logs each action in real time with step icons.
6. When your journey is complete, click the red End recording button.

Replaying and Simulating Network Conditions

Once recorded, you can execute automated replays directly inside your browser tab:

1. Click the Replay button at the top of the recorded timeline. Chrome automatically executes the sequence of clicks and keystrokes.
2. To test real-world mobile scenarios, click the Replay settings drop-down menu adjacent to the Replay button:

Setting	Configuration Options	Testing Purpose
Network Throttling	Fast 3G, Slow 3G, Offline	Validates how loading spinners and asynchronous API calls perform under poor connectivity.
Replay Speed	Normal, Slow (2x), Very Slow (4x)	Slows down execution to inspect UI transitions and verify visual animations step-by-step.
Performance Measurement	Performance Profile / Lighthouse	Generates a full performance trace showing layout shifts and thread bottlenecks throughout the flow.

Editing Steps and Adding Assertions

Recorded flows are completely editable. Click any step in the list to expand its parameters:

• Add Assertion Steps: Hover between two steps, click the + icon, and select Add assertion. You can configure DevTools to assert that a specific element exists, contains exact text, or matches a specific CSS attribute before continuing.
• Adjust Timeouts: Increase step timeout durations for heavy database actions or slow payment gateways to prevent false failure reports.
• Reorder or Delete Steps: Right-click accidental clicks or unnecessary mouse scrolls and select Delete step.

Exporting User Flows for CI/CD Pipelines

To convert your visual recording into continuous integration scripts:

1. Click the Export icon (an arrow pointing out of a tray) in the top toolbar of the Recorder panel.
2. Choose your preferred export format:
   • JSON: Standard schema compatible with the @puppeteer/replay CLI tool for headless headless runners.
   • Puppeteer: Complete Node.js script ready for execution in automated test suites.
   • Puppeteer (including Lighthouse): Measures Lighthouse audits across each milestone of the journey.
3. Save the file into your local project repository for automated testing on GitHub Actions or Jenkins.