Recording Scenarios

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

Starting a Recording

From the Terminal

poliage record "Login Flow"

From the Studio UI

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

How Recording Works

When you start recording, Poliage:

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

Poliage 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 PoliageSteps, they render as a Scribe-like walkthrough with numbered steps and action indicators.

Example: Visual Approval Workflow

Here's a complete multi-step walkthrough of the visual approval process:

1

Navigate to Review Queue

Open the visuals page and filter by pending status to see items awaiting review.

initial

2

Select a Visual

Click on any visual card to open the detail view with side-by-side comparison.

click

3

Approve or Reject

Use the approve button to make the new version live, or reject to keep the old version.

click