Chrome DevTools: Record and playback your user journeys

Introduction

You can use the new Recorder Panel to record user flows (a.k.a. user journeys or user interactions) and play them back. The playback can be useful for:

• Asserting website functionality (for example, with automated testing).
• Repeatedly performance profiling a user flow to see if there's any improvement when you change your code.

How to use the Recorder

The Recorder has its own panel:

1. Open up the Recorder panel from the Command Menu (Cmd + Shift + P).
2. Select Start new recording and enter a name for your flow, e.g. Sign up or Scroll to bottom.
3. Perform your desired user flow on the page and select End recording.

Your script is now recorded! You can do the following:

• Replay the user flow. The playback happens on the page.
• Performance profile the user flow. It works like this: 1) Profiling begins, 2) The playback runs on the page, 3) The Performance panel immediately opens up with your results.
• Export the user flow as a Puppeteer script. This way, you can clean it up and use it in your acceptance tests for example.
• Edit the user flow. Within the DevTools UI, click on a single action in a user flow to edit it. For example, you can edit selectors, change values and more.

Puppeteer script

When you export a user flow as a Puppeteer script, it's likely you'll need to edit it slightly. However it's a great starting point. As an example, the following script was generated automatically, it inputs the Enter key on a page:

const targetPage = page;
await targetPage.keyboard.up("Enter");

This script clicks on a button:

const targetPage = page;
const element = await waitForSelectors([["#button"]], targetPage);
await element.click({ offset: { x: 22.75, y: 16} });

The code may not be production-ready, but it's a good first step.

Availability

This feature is currently in Chrome Canary, tested in version 97.

Further Resource

If you want to learn more about the Performance Panel, check out a video I made: Understanding Paint Performance with Chrome DevTools.