Record product walkthroughs

View as Markdown

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

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.

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

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

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.