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.

Smallest scenario

JSON

{
  "scenarios": [
    {
      "name": "billing-overview",
      "steps": [
        { "action": "goto", "url": "/app/billing" },
        { "action": "capture", "key": "billing-overview" }
      ]
    }
  ]
}

Expanded example

JSON

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

Step API reference

Action	Required fields	Optional fields	Description
`goto`	`url`	-	Navigate to a route
`click`	`selector`	`description`	Click an element
`type`	`selector`, `text`	-	Type into an input
`hover`	`selector`	-	Hover an element
`wait`	-	`ms`	Pause execution
`waitFor`	`selector`	`timeout`	Wait for a selector
`capture`	`key`	`selector`, `clip`, `crop`	Capture the current view

Scenario-level overrides

JSON

{
  "name": "checkout-flow",
  "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.