Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Record, replay, and measure user flows

Published on Updated on

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

Complete this tutorial to learn how to 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.

For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference.

This feature is available only in Chrome, not Chromium.

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. Start a new recording.

    The Selector attribute textbox and Selector types to record checkboxes are optional. For this tutorial, leave the defaults as they are.

    For more information, see Understand selectors.

  3. Click on the Start a new recording button. The recording is started. The panel is showing Recording... indicating the recording is in progress. recording in progress.

  4. Click on Cappuccino 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 and remove Americano from the cart.

    Important

    Optionally, you can remove Americano on the menu page by hovering over the Total button and clicking - next to Americano in the pop-up menu.

    However, you'll have to add the hover step manually after you finish the recording because the Recorder doesn't automatically capture hover events.

  7. Click on the Total: $19.00 button to start the checkout process.

  8. 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.

  9. Click on the Submit button to complete the checkout process.

    Important

    You can manually edit steps even before you end the recording.

  10. In the Recorder panel, click End recording. 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.Replay button.

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

If you made a misclick during recording or something doesn't work, you can debug your user flow: slow down its replay, set a breakpoint, and execute it step by step.

Important

When replaying a user flow recording, the Recorder waits until the element is visible or clickable in the viewport or tries to automatically scroll the element into the viewport before replaying the corresponding step.

Simulate slow network

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

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 steps

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

For a comprehensive list of editing options, see Edit steps in features reference.

Expand steps

Expand each step to see the details of the action. For example, expand the Click Element "Cappuccino" step.

In the recorder panel, the Cappuccino element has been expanded to reveal type, target, selectors, offset X, and offset Y.

The step above shows two selectors. For more information, see Understand the recording's selector.

When replaying the user flow, the Recorder tries 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.

Add and remove selectors from a step

You can add or remove any selectors. For example, you can remove the selector #2 because just aria/Cappuccino is sufficient in this case. Hover over the selector #2 and click on - to remove it.

The DevTools recorder panel shows an option to remove a selector.

Edit selectors in a step

The selector is editable too. For example, if you want to select Mocha instead of Cappuccino, you can:

  1. Edit the selector value to aria/Mocha instead.

    Edit a selector.

    Alternatively, click the SelectSelect button. button and then click Mocha on the page.

  2. Replay the flow now, it should select Mocha instead of Cappuccino.

  3. Try to edit other step properties such as type, target, value and more.

Add and remove steps

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:

  1. Right-click the step you want to edit or click the Three-dot menu. three-dot icon next to it.

    The drop-down menu of a step with options to remove and add a steps before or after.
  2. You can select Remove step to remove it. For example, the Scroll event after the Mocha step is not necessary.

  3. Say, you want to wait until the 9 coffees display on the page before performing any steps. In the Mocha step menu, select Add step before. A new step named Assert Element was added and can now be edited.

  4. In Assert Element, edit the new step with the following details:

    • type: waitForElement
    • selector #1: .cup
    • operator: == (click add operator button)
    • count: 9 (click add count button) The new step for coffee checkout has been updated with the aforementioned details.
  5. Replay.Replay the flow now to see the changes.

Next steps

Congratulations, you have completed the tutorial!

To explore more features and workflows (for example, import and export) related to the Recorder, see the Recorder features reference.

Updated on Improve article

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