Scenarios & Steps

Scenarios are sequences of steps that end in one or more captures. They can be recorded interactively or written manually, but the stored model is always JSON.

Visuals explorer — Every scenario's captures land in the visuals explorer, grouped by scenario and variant so you can review what each step produced.

Smallest scenario

Every scenario needs a unique key, a human-readable name, and the target url. The url is the route Reshot navigates to — you do not add a goto step for it. screenshot steps each need their own unique key.

JSON

{
  "scenarios": [
    {
      "key": "billing-overview",
      "name": "Billing Overview",
      "url": "/app/billing",
      "steps": [
        { "action": "wait", "ms": 1000 },
        { "action": "screenshot", "key": "billing-overview" }
      ]
    }
  ]
}

Expanded example

JSON

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

Step API reference

Action	Required fields	Optional fields	Description
`click`	`selector`	`description`	Click an element
`type`	`selector`, `text`	-	Type into an input
`hover`	`selector`	-	Hover an element
`wait`	-	`ms`	Pause execution
`waitForSelector`	`selector`	`timeout`	Wait for a selector
`scroll`	-	`selector`	Scroll the page or to an element
`screenshot`	`key`	`selector`, `clip`, `crop`, `description`	Capture the current view

Scenario-level overrides

JSON

{
  "key": "checkout-flow",
  "name": "Checkout Flow",
  "url": "/checkout",
  "timeout": 60000,
  "viewport": {
    "width": 1920,
    "height": 1080
  },
  "steps": []
}

Scenario-level settings override the global config.

Selector guidance

Prefer app-owned selectors such as data-testid or data-reshot-* attributes. They are easier to keep stable across product changes than visual CSS selectors.