Recorder: 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
Click on More options
> More tools > Recorder.
Alternatively, use the Command Menu to open the Recorder panel.
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:
- Add a coffee to the cart.
- Add another coffee to the cart.
- Go to the cart page.
- Remove one coffee from the cart.
- Start the checkout process.
- Fill in payment details.
- Check out.
Record a user flow
Open this demo page. Click on the Start new recording button to begin.
Enter "coffee checkout" in the Recording name textbox.
The Selector attribute textbox is optional. Leave it blank as it is. For more information, see Customize the recording's selector.
Click on the Start a new recording button. The recording is started. The panel is showing Recording... indicating the recording is in progress.
Click on Cappuccino to add it to the cart.
Click on Americano to add it to the cart. Notice that the Recorder shows the steps that you have performed so far.
Go to the cart page.
Remove Americano from the cart.
Click on the Total: $19.00 button to start the checkout process.
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.
Click on the Submit button to complete the checkout process.
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.
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.
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.
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.

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

On the top of the Recorder panel, there are options for you to:
Add a new recording
. Click on the + icon to add a new recording.
View all recordings
. The drop-down shows the list of saved recordings. Select the [number] recording(s) option to expand and manage the list of saved recordings.
Export a recording
. To further customize the script or share it for bug reporting purposes, you can export the user flow in one of the following formats:
- JSON file.
- Puppeteer script.
- @puppeteer/replay script.
For more information on the formats, see Export a user flow.
Import a recording
. Only in JSON format.
Delete a recording
. Delete the selected recording.
You can also edit the recording's name by clicking the edit button next to it.
Edit steps
Let's walk through the options to edit the steps within a workflow.
Expand steps
Expand each step to see the details of the action. For example, expand the Click Element "Cappuccino" step.

The step above shows two selectors. For more information, see Understanding 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.

Edit selectors in a step
The selector is editable too. For example, if you want to select Mocha instead of Cappuccino, you can:
Edit the selector value to aria/Mocha instead.
Alternatively, click the Select
button and then click Mocha on the page.
Replay the flow now, it should select Mocha instead of Cappuccino.
Try to edit other step properties such as type, target, value and more.
Adjust timeouts for steps
In case your page has slow network requests or lengthy animations, the replay can fail on steps that exceed the default timeout of 5000
milliseconds.
To avoid this problem, you can adjust the default timeout for each step at once or set separate timeouts for specific steps. Timeouts on specific steps overwrite the default.
To adjust the default timeout for each step at once:
Click on Replay settings to make the Timeout box editable.
In the Timeout box, set the timeout value in milliseconds.
Click
Replay to see the adjusted default timeout in action.
To overwrite the default timeout on a specific step:
Expand the step and click Add timeout.
Click on the
timeout: <value>
and set the value in milliseconds.Click
Replay to see the step with the timeout in action.
To remove a timeout overwrite on a step, click the Delete button next to it.
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. Click on the 3-dot kebab menu next to the step to open the menu.

- For example, the Scroll event after the Mocha step is not necessary. You can select Remove step to remove it.
- 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.
- 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)
Replay the flow now to see the changes.
Share user flows
You can export and import user flows. This is useful for bug reporting because you can share an exact record of the steps that reproduce a bug.
Export a user flow
To export a user flow:
- Open the user flow you want to export.
- Click on the Export
. button at the top of the Recorder panel.
- Select one of the following formats from the drop-down list:
- Export as a JSON file. Download the recording as a JSON file.
- Export as a @puppeteer/replay script. Download the recording as a Puppeteer Replay script.
- Export as a Puppeteer script. Download the recording as a Puppeteer script.
- Save the file.
The @puppeteer/replay is a library built on top of Puppeteer. It is also a command line tool, so you can replay JSON files with it too.
Advance use case: Integrate with the Puppeteer Replay library
You can build your own library on top of the Puppeteer Replay library to replay or "stringify" the user flow JSON files, that is, convert them to something else.
For example, @cypress/chrome-recorder is a library built on top of Puppeteer Replay. You can use it to convert user flow JSON files to Cypress test scripts. Watch this demo to see it in action.
Learn more about the stringify feature in Puppeteer Replay.
You can do the following with each export option:
- JSON. Edit the human-readable JSON object and import the JSON file back to the Recorder.
- @puppeteer/replay. Replay the script with the Puppeteer Replay library. When exporting as a @puppeteer/replay script, the steps remain a JSON object. This option is perfect if you want to integrate with your CI/CD pipeline but still have the flexibility to edit the steps as JSON, later convert and import them back into the Recorder.
- Puppeteer script. Replay the script with Puppeteer. Since the steps are converted into JavaScript, you can have more fine-grained customization, for example, looping the steps. One caveat, you can't import this script back into the Recorder.
Import a user flow
To import a user flow:
- Click the Import
button at the top of the Recorder panel.
- Select the JSON file with the recorded user flow.
- Click the
Replay button to run the imported user flow.
Understanding the recording's selector
During recording, the Recorder automatically detects two types of selectors for most of the steps: ARIA and CSS.
For more information on ARIA selectors, see Syntactic vs. semantic selectors.
For simple webpages, id
attributes and CSS class
attributes are sufficient for the Recorder to detect the selectors. However, that might not always be the case, because:
- Your webpages may use dynamic classes or ID's that change
- Your selectors may break from development changes to CSS styles or JS behavior
Common test selectors
For example, the CSS class
values might be auto-generated for applications developed with modern JavaScript frameworks (for example, React, Angular, Vue) and CSS frameworks.

In these cases, you can use data-*
attributes to create more resilient tests. There are already some common data-*
selectors that people use for automation. The Recorder supports them as well.
If you have the following common test selectors defined, the Recorder automatically detects and uses them first:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
For example, inspect the "Cappuccino" element on this demo page and see the test attributes:

Record a click on "Cappuccino", expand the corresponding step in the recording, and check the detected selectors:

Customize the recording's selector
You can customize the selector of a recording if the above doesn't work for you.
For example, this demo page uses the data-automate
attribute as the selector. Start a new recording and enter the data-automate
as the selector attribute.

Fill in an email address and observe the selector value ([data-automate=email-address]
).

Selector priority
In addition to the ARIA selector, the Recorder looks for the best CSS selector it can find by the following attributes and in the following order:
- Your custom selector attribute if you specified it at the start of the recording.
- ARIA selector if found.
- The most common attributes used for testing:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- ID attributes, for example,
<div id="some_ID">
. - Regular CSS selectors.
Last updated: Improve article