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. 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 for its flow controls.

Inspect the sample flow

The sample 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.

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.