Recording

​

Overview

​

Core Capabilities

​

Quick Start

​

1. Select a Browser Profile

​

2. Start Recording

1. Click the Start Recording button on the recording page
2. Select a browser profile
3. Optionally enable video recording (captures screen visuals simultaneously)
4. The browser launches automatically and enters recording mode

​

3. Perform Actions

• Page navigation (URL changes)
• Mouse clicks
• Text input and modification
• Keyboard keystrokes
• Page scrolling
• Form submission
• Drag and drop

​

4. Stop Recording

​

Supported Action Types

​

Browser Events

​

System-level Events (Extensions)

​

Element Locator Strategy

​

Locator Priority

​

Semantic Features (ElementFeatures)

interface ElementFeatures {
  role?: string          // ARIA role
  name?: string          // Accessible name
  testId?: string        // data-testid
  ariaLabel?: string     // aria-label
  text?: string          // Text content
  placeholder?: string   // placeholder attribute
  tagName?: string       // HTML tag name
  type?: string          // input type
}

​

Editing Workflows

​

Workflow Editor

• Drag-and-drop reordering: Adjust the execution order of action steps
• Edit actions: Modify selectors, values, URLs, and other properties
• Insert steps: Add new action steps at any position
• Delete steps: Remove unnecessary actions
• Video sync: Click a step to automatically jump to the corresponding timestamp in the recorded video

​

Editing Action Details

• Basic info: Action type, description
• Selectors: CSS selector, XPath, element features
• Value: Input value, navigation URL
• Parameterization settings: Mark as variable, set variable name and default value

​

Parameterization

​

What is Parameterization

​

Single Action Parameterization

1. Click an action step in the workflow editor to open the editing dialog
2. Toggle on the Parameterize switch
3. Set the Variable Name (e.g., username)
4. Optionally enter a Parameter Description (e.g., “Login username”)
5. Optionally set a Default Value (e.g., admin)
6. Save

​

Batch Parameterization

1. If there are non-parameterized input/change/navigate actions, a Batch Parameterize prompt appears at the top of the workflow editor
2. Click it, and the system automatically generates variable names based on element attributes (name, id, placeholder, etc.)
3. Current values are automatically set as default values
4. You can further adjust settings in the editing dialog

​

Variable Resolution

Input value: "Hello, {username}! Your code is {verifyCode}"
Variables passed: { username: "John", verifyCode: "123456" }
Actual execution: "Hello, John! Your code is 123456"

• Full replacement: {username} → John
• Inline replacement: https://{host}/api → https://example.com/api
• Unmatched variables are kept as-is: {unknown} → {unknown}

​

Replay Testing

​

Basic Replay

​

Parameterized Replay

1. All parameterized fields are automatically displayed
2. Parameter name, description, and default value are shown
3. Required parameters (no default value) are marked in red
4. Enter test values and click Start Replay

​

Replay Engine

​

Video Recording

​

Recording Options

​

Video-Action Synchronization

• Each action records a videoTimestamp (seconds relative to recording start)
• Clicking an action step in the editor automatically jumps the video to the corresponding time
• During replay, the video preview syncs with action execution

​

Storage Estimates

​

Local Storage

{userData}/workflows/
├── {workflow-id}.json          # Workflow definition (action sequence + metadata)
├── {workflow-id}/
│   ├── recordings/             # Recorded video files
│   │   └── recording.webm
│   ├── screenshots/            # Keyframe screenshots
│   │   ├── action-001.png
│   │   └── action-002.png
│   └── metadata.json           # Sync metadata

​

Workflow JSON Structure

{
  "id": "wf-abc123",
  "name": "Log in to system and query data",
  "actions": [
    {
      "id": "act-001",
      "type": "navigate",
      "url": "https://system.example.com",
      "timestamp": 1700000000000
    },
    {
      "id": "act-002",
      "type": "input",
      "selector": "#username",
      "value": "{username}",
      "isParameterized": true,
      "variableName": "username",
      "paramDescription": "Login username",
      "defaultValue": "admin",
      "elementFeatures": {
        "role": "textbox",
        "name": "Username",
        "placeholder": "Enter username"
      }
    }
  ],
  "profileId": "profile-001",
  "toolName": "login_and_query",
  "toolDescription": "Log in to the system and query specified data",
  "isPublished": true
}

​

Next Steps