# Replay a Chrome DevTools Recorder flow

Canonical: https://fairleadhq.com/docs/recorder/developers/devtools-export/

Updated: 2026-10-10
Publication state: published
Product version: Source verified — 52de40a

Agent summary: Import recorded actions as a JSON user flow. Initial navigation does not restore login or data; unsupported actions need adaptation.

## Prerequisites

- A supplied steps.json file; Chrome DevTools available

## Inputs

- Reviewed steps.json and application preconditions

## Outputs

- An imported flow checked against the intended behavior

## Limitations

- Initial navigation does not restore login or data; unsupported actions need adaptation

## Permissions

- Authorization to replay against the target environment

## Privacy

- Review logs and recorded values before copying or running artifacts


Import recorded actions as a JSON user flow.

Use `steps.json` to bring supported recorded actions into Chrome DevTools Recorder. Prepare the target application state before replaying the flow.

## Locate the supplied actions

Find `steps.json` in the [shared artifact bundle](https://fairleadhq.com/docs/recorder/developers/artifact-bundle/). Open it in Chrome DevTools Recorder to inspect and replay the captured flow.

The file describes a DevTools user flow. It is not the complete Fairlead session Report or the entire sample reproduction archive.

## Review the preconditions

Inspect the starting URL and recorded values. If capture began on an already loaded page, Recorder adds an initial navigation so the exported flow has a starting page.

That navigation does not restore authentication, existing data, or earlier actions. Supply those preconditions separately. Redacted inputs become literal `[redacted]` values in the flow. Replace them with safe test data before replay.

Selector alternatives include available CSS candidates and XPath fallbacks. All exported action targets use `main`; iframe actions need frame targeting added before replay. Keyboard actions are omitted. File controls are not exported as file-upload steps; replace any generic change with the required upload action. Review ambiguous or dynamic selectors as well.

## Import and replay

1. Open Chrome DevTools and its **Recorder** panel.
2. Select **Import** and choose `steps.json`.
3. Review the imported steps.
4. Select **Replay** when the target environment and data are ready.

Chrome accepts JSON user flows through this import path. See the [DevTools Recorder reference](https://developer.chrome.com/docs/devtools/recorder/reference#import) for its flow controls.

## Inspect the sample flow

The [sample ZIP](https://fairleadhq.com/downloads/fairlead-recorder-sample-v1.zip) contains a `steps.json` with 22 steps. It starts with `setViewport` (1920 × 907, device scale factor 2) and `navigate`, followed by the card-creation and lane-change interactions. The 21 numbered actions in `session.md` use a different numbering scheme; do not join the two files by array index.

Importing the flow lets you inspect it before replay. Review the recorded public URL, signed-in project state, repeated input changes, and positional selectors. The initial navigation's `assertedEvents` checks navigation, not whether the card's Blocked badge clears. Add the expected lane and badge checks in your test workflow; see [adapting the sample test](https://fairleadhq.com/docs/recorder/developers/playwright-export/#adapt-the-sample-recording).

## Check the result

Compare the replay with the intended test, not only with the absence of errors. Unsupported actions and missing retained history may require manual steps or edits. Add the checks needed to assess expected behavior.

If DevTools import or replay fails, verify the file type, starting state, selectors, and redacted inputs. Ask the sender whether the download was partial when `steps.json` is missing or invalid.