---
title: Record product walkthroughs
description: Capture a product flow with video, narration, browser actions, console messages, and network requests, then use the recording to review the feature or create an E2E test.
---

# Record product walkthroughs

<div class="view-markdown-wrapper">
<ViewMarkdown />
</div>

Use a recording to explain a product workflow without writing a detailed prompt or specification. Complete the workflow in the browser while describing your actions and the expected results.

Shiplight places the video, narration, transcript, browser actions, console messages, and network requests on a single timeline. You can review this information together or use the recording as the source for an E2E test.

Recordings also work well for:

- Capturing a bug with the steps and browser errors that led to it.
- Saving a walkthrough of a product feature.
- Providing a coding agent with more context than a text-only prompt.
- Organizing important workflows before deciding which ones require tests.

## Record a flow

**1. Install the extension.** Add [Product Surface Recorder](https://chromewebstore.google.com/detail/product-surface-recorder/fffpienmjoemnpepmbdeibanmhiiejln?hl=en) from the Chrome Web Store.

**2. Sign in.** Open the extension and sign in to your Shiplight account. Shiplight uploads the recording to the organization associated with that account.

If another organization sent you an upload code, select **Use code instead** and enter the code. See [Send a recording as a non-member](/guides/receive-recordings-from-non-members#send-a-recording-as-a-non-member).

**3. Allow microphone access.** Select **Grant microphone** the first time you use the extension. As you record, describe your actions and the expected results.

**4. Choose what to capture.**

- **This tab** records the current browser tab.
- **Desktop** records a window, tab, or screen that you choose.

**5. Start recording.** Click **Start recording**, then use the product as you normally would.

While recording, you can:

- Select **Pause** and **Resume** to control the recording.
- Use the extension's right-click controls.
- Select **Cancel** to discard the session.
- Select **Stop & upload** to finish.

::: tip Say what you expect
Narration provides context that browser actions alone cannot capture. For example: “I am submitting the order. The confirmation page should show the new order number.”
:::

::: info Sensitive information
Recordings may capture sensitive information visible on screen. Avoid displaying or entering passwords, payment details, or other secrets while recording.
:::

After you stop, the extension uploads the recording to [Shiplight Cloud](https://app.shiplight.ai/recordings). Keep the extension open until it confirms that the upload is complete. If the upload fails, select **Retry upload**.

## Review and organize recordings

Open [Recordings in Shiplight Cloud](https://app.shiplight.ai/recordings) to find recordings from your organization. You can search by title, filter by tags or date, and delete recordings you no longer need.

Open a recording to watch the video and inspect the captured details:

- **Info** — page, browser, viewport, duration, and tags
- **Console** — browser console messages at the time they occurred
- **Network** — requests, responses, methods, and status codes
- **Actions** — clicks, input, navigation, and other browser actions
- **Transcript** — your spoken narration, aligned with the recording

Select a console message, network request, action, transcript segment, or comment timestamp to move to that point in the video.

Use the edit controls to change the title, tags, or transcript. Correcting the transcript helps reviewers and coding agents understand the intended outcome. Comments are linked to specific points in the video, which you can use to mark an important step or identify a problem.

## Create an E2E test from a recording

The Shiplight agent skill can access recordings from your organization. It uses the browser actions to reconstruct the workflow, the console and network timeline for technical context, and the transcript to understand the expected result.

Ask your coding agent to find the recording first:

```
/shiplight cloud — find my latest recording of the checkout flow
and summarize the steps and expected result.
```

Then ask it to turn that recording into a test:

```
/shiplight create-yaml-tests — create an E2E test from recording
<recording ID>.
```

The agent needs a Shiplight API token with `recordings:read` access. Run `npx shiplight login` from your project to create a token and save it as `SHIPLIGHT_API_TOKEN`, or create one manually from [API Tokens](/cloud_v2/api-tokens).

Review the generated test before committing it. A recording represents one instance of a workflow. The final test should preserve the important actions and assertions without depending on incidental details from that session.

## Record a useful session

- Start close to the beginning of the flow.
- Narrate the goal before the first action.
- Say what you expect at important checkpoints.
- Reproduce only one bug or feature flow per recording when possible.
- Stop after the expected result or failure is visible.
- Give the recording a clear title and tags in Shiplight Cloud.