Recording Scenarios

A Scenario represents a user flow or UI state you want to document. Reshot records your interactions and converts them into replayable automation scripts.

Starting a Recording

From the Terminal

reshot record "Login Flow"

From the Studio UI

1. Open Studio with reshot studio
2. Click the Record button
3. Enter a scenario name

How Recording Works

When you start recording, Reshot:

1. Connects to your Chrome debugging session
2. Listens for user interactions (clicks, typing, navigation)
3. Generates stable selectors for each element
4. Logs actions to memory in real-time

Selector Strategy

Reshot prioritizes selectors in this order:

1. Data Test IDs: [data-testid="nav-menu"]
2. Accessibility Attributes: role=button[name="Save"]
3. Text Content: text="Welcome"
4. CSS Selectors: .btn-primary, #submit (fallback)

Recording Controls

During a recording session:

Best Practices

Tips for Reliable Recordings

• Use explicit waits: Add waitForSelector steps when content loads dynamically
• Avoid timing issues: Use element-based waits instead of fixed delays
• Test your scenarios: Run them multiple times to ensure consistency
• Keep scenarios focused: One scenario per user flow or feature

Editing Recorded Scenarios

After recording, scenarios are saved to reshot.config.json. You can edit them directly:

{
  "scenarios": [
    {
      "key": "login-flow",
      "name": "Login Flow",
      "url": "/login",
      "steps": [
        {
          "action": "type",
          "selector": "[data-testid='email']",
          "text": "user@example.com"
        },
        {
          "action": "type",
          "selector": "[data-testid='password']",
          "text": "••••••••"
        },
        { "action": "click", "selector": "button[type='submit']" },
        { "action": "waitForSelector", "selector": "[data-testid='dashboard']" },
        { "action": "screenshot", "key": "dashboard-after-login" }
      ]
    }
  ]
}

Multi-Step Visual Workflows

Multi-step scenarios generate a separate visual for each capture step. When embedded in documentation using ReshotSteps, they render as an interactive walkthrough with progress controls and step navigation.

Example: Multi-Step Capture

Here's a complete multi-step walkthrough of running a capture from Studio:

1Step 1 of 3initial

Select Scenario

Choose which scenarios to capture from the list.

Select Scenario1

Check Scenario2

Run Capture3

Use the arrows or step chips to move through the workflow.1/3