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 robust selectors for each element
4. Logs actions to memory in real-time

Selector Strategy

Reshot uses a "Robust Selector" engine that prioritizes stable selectors:

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 waitFor 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 docsync.config.json. You can edit them directly:

{
  "scenarios": [
    {
      "name": "login-flow",
      "steps": [
        { "action": "goto", "url": "/login" },
        { "action": "type", "selector": "[data-testid='email']", "text": "user@example.com" },
        { "action": "type", "selector": "[data-testid='password']", "text": "••••••••" },
        { "action": "click", "selector": "button[type='submit']" },
        { "action": "waitFor", "selector": "[data-testid='dashboard']" },
        { "action": "capture", "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 a Scribe-like walkthrough with numbered steps and action indicators.

Example: Multi-Step Capture

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

1

Select Scenario

Choose which scenarios to capture from the list.

initial

2

Check Scenario

Select the scenario checkbox to include it in the run.

click

3

Run Capture

Click Run to start the capture job and generate assets.

click