How the Chromium Recorder Panel Exports Automated Scripts

This article provides a concise guide to the Recorder panel built into Chromium-based web browsers. It explains the core functionality of the tool, how it captures complex user interactions on a webpage, and the exact process required to export these recorded user journeys into runnable, automated scripts for popular testing frameworks.

What is the Chromium Recorder Panel?

The Recorder panel is a built-in feature within the Developer Tools (DevTools) of Chromium-based browsers, such as Google Chrome, Microsoft Edge, and Brave. Its primary purpose is to help developers and quality assurance testers record, replay, and measure user flows—often called "user journeys"—directly in the browser.

Instead of manually writing code to simulate a user logging in, adding an item to a shopping cart, or filling out a form, the Recorder panel watches your actions and automatically generates the underlying steps. It captures events such as clicks, keyboard inputs, page navigations, and scrolling, while automatically identifying the most reliable CSS, ARIA, or XPath selectors for the interacted elements.

How to Record a User Journey

Before exporting a script, you must capture a user flow. The process is straightforward:

  1. Open a Chromium browser and navigate to your target webpage.
  2. Open DevTools by pressing F12 or Ctrl+Shift+I (Cmd+Option+I on Mac).
  3. Open the Command Menu by pressing Ctrl+Shift+P (Cmd+Shift+P on Mac).
  4. Type Show Recorder and press Enter.
  5. Click the Start new recording button.
  6. Enter a name for your recording and click the red Start recording button at the bottom.
  7. Interact with the webpage as a normal user would. The Recorder panel will log every action in real time.
  8. Click End recording once the user journey is complete.

Exporting Journeys as Automated Scripts

Once a recording is finished, the Recorder panel translates the captured DOM events and element selectors into structured code. You can export this data into functional automated scripts in just a few clicks.

To export the recording, locate the Export icon (represented by a downward-pointing arrow) in the top action bar of the Recorder panel. Clicking this icon presents several native formats:

  • Puppeteer: Exports the recording as a complete, standalone Node.js script using the Puppeteer library. This script includes browser launch parameters, viewport configurations, and step-by-step instructions to replicate your actions.
  • Puppeteer (including Lighthouse analysis): Exports a Puppeteer script that also triggers a Lighthouse performance audit at specific points during the user flow.
  • @puppeteer/replay: Exports a streamlined script designed to be run using the Puppeteer Replay library, which is useful for executing JSON files directly.
  • JSON: Exports the raw recording data as a JSON file. This allows you to import the user journey back into the Recorder panel later or share it with team members.

After selecting your desired format, your browser will prompt you to save the generated file (typically as a .js or .json file) to your local machine. You can immediately run the JavaScript files in your terminal using Node.js, provided you have the Puppeteer library installed.

Exporting to Third-Party Frameworks

While the Recorder panel only supports Puppeteer and JSON natively, its export capabilities can be expanded to support almost any modern end-to-end testing framework.

In the Export dropdown menu, clicking Get extensions... opens the Chrome Web Store, where you can install official plugins created by other testing platforms. Once installed, these extensions integrate directly into the Export menu, allowing you to instantly convert your recorded user journeys into automated scripts for:

  • Playwright
  • Cypress
  • WebdriverIO
  • Nightwatch
  • Testing Library

Modifying Scripts Before Export

To ensure your exported scripts do not fail due to network lag or slow animations, the Recorder panel allows you to edit steps prior to exporting. You can expand any recorded step in the panel to change the target selector, adjust the timeout duration, or add an "Wait for element" assertion. Any modifications made in the UI are automatically reflected in the final exported code.