Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu Record, replay and measure user flows View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu Record, replay and measure user flows View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Record, replay and measure user flows

Published on Updated on

Take a glance at the new Recorder panel (preview feature) with the video below.

Use the Recorder panel to record, replay and measure user flows.

This is a preview feature in Chrome 97. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Open the Recorder panel

  1. Open DevTools.

  2. Click on More options   More   > More tools > Recorder.

    Recorder in the menu

    Alternatively, use the Command Menu to open the Recorder panel.

    Show Recorder command in the Command menu

Introduction

We will be using this coffee ordering demo page. Checkout is a common user flow among shopping websites.

In the next sections, we will walk you through how to record, replay and audit the following checkout flow with the Recorder panel:

  1. Add a coffee to the cart.
  2. Add another coffee to the cart.
  3. Go to the cart page.
  4. Remove one coffee from the cart.
  5. Start the checkout process.
  6. Fill in payment details.
  7. Check out.

Record a user flow

  1. Open this demo page. Click on the Start new recording button to begin.
  2. Enter "coffee checkout" in the Recording name textbox, then click on the Start a new recording button. Start a new recording
  3. The recording is started. The panel is showing Recording... indicating the recording is in progress. recording in progress
  4. Click on Cappucino to add it to the cart.
  5. Click on Americano to add it to the cart. Notice that the Recorder shows the steps that you have performed so far. steps in the Recorder panel
  6. Go to the cart page.
  7. Remove Americano from the cart.
  8. Click on the Total: $19.00 button to start the checkout process.
  9. In the payment details form, fill in the Name and Email textboxes, and check the I would like to receive order updates and promotional messages. checkbox. payment details form
  10. Click on the Submit button to complete the checkout process.
  11. In the Recorder panel. Click End recording button to end the recording.

Replay a user flow

After recording a user flow, you can replay it by clicking on the Replay button.

You can see the user flow replay on the page. The replay progress is shown in the Recorder panel as well.

You can simulate a slow network connection by configuring the Replay settings. For example, expand the Replay settings, select Slow 3G in the Network dropdown. replay settings

More settings might be supported in the future. Share with us the replay settings you would like to have!

Measure a user flow

You can measure the performance of a user flow by clicking on the Measure performance button. For example, checkout is a critical user flow of a shopping website. With the Recorder panel, you can record the checkout flow once and measure it regularly.

Clicking on the Measure performance button will first trigger a replay of the user flow, then open the performance trace in the Performance panel.

Learn how to analyze your page's runtime performance with the Performance panel. You can enable the Web Vitals checkbox in the Performance panel, to view the Web Vitals metrics, identify opportunities to improve your user browsing experience.

Performance panel

Edit user flows

Let's walk through the options to edit the user flows.

header section of the Recorder panel

On the top of the Recorder panel, there are options for you to:

  1. Add a new recording. Click on the + icon to add a new recording.
  2. View all recordings. The dropdown shows the list of saved recordings. Select the [number] recording(s) option to expand and manage the list of saved recordings. View all recordings
  3. Export a recording. You can export the user flow as Puppeteer script to customize the script further.
  4. Delete a recording. Delete the selected recording.

Edit steps

Let's walk through the options to edit the steps within a workflow.

  1. Expand each step to see the details of the action. For example, expand the Click Element "Cappucino" step. Expand Cappucino
  2. The step above shows 2 selectors. The Recorder will automatically detect 2 selectors for most of the steps by default.
    • When replaying the user flow, the Recorder will try to query the element with one of the selectors by sequence.
    • For example, if the Recorder successfully queries the element with the first selector, it will skip the second selector and proceed to the next step.
  3. You can add or remove any selectors. For example, you can remove the selector #2 because just aria/Cappucino is sufficient in this case. Hover over the selector #2 and click on - to remove it. remove a selector
  4. The selector is editable too. For example, if you want to select Mocha instead of Cappucino, you can edit the selector value to aria/Mocha instead. edit a selector
  5. Replay the flow now, it should select Mocha instead of Cappucino.
  6. Try to edit other step properties such as type, target, value and more.

There are options to add and remove steps too. This is useful if you want to add an extra step or remove an accidentally added step. Instead of re-recording the user flow, you can just edit it. Click on the 3-dot kebab menu next to the step to open the menu.

step menu
  1. For example, the Scroll event after the Mocha step is not necessary. You can select Remove step to remove it.
  2. Says, you want to wait until there are 9 coffees display on the page before performing any steps.
  3. In the Mocha step menu, select Add step before.
  4. A new step is created. new step added
  5. Edit the step with the following details:
    • type: waitForElement
    • selector #1: .cup
    • operator: == (click add operator button)
    • count: 9 (click add count button) step details
  6. Replay the flow now to see the changes.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.