Skip to main content
Learn proven patterns for form automation, data extraction, multi-page workflows, and error handling.

​
Core Workflow Patterns

The foundation of most automation workflows is to navigate, inspect, and interact with web pages. Here are some common patterns: 

// 1. Navigate to target page
{
  "name": "browser_navigate",
  "arguments": {
    "url": "https://example.com"
  }
}

// 2. Wait for page load
{
  "name": "browser_wait",
  "arguments": {
    "time": 2
  }
}

// 3. Take screenshot to verify arrival
{
  "name": "browser_screenshot",
  "arguments": {}
}

​
Form Automation Patterns

Forms are a common web interaction. Here are patterns for filling and submitting forms, including multi-step and dynamic forms. 
// 1. Navigate to form page
{
  "name": "browser_navigate",
  "arguments": {
    "url": "https://example.com/contact"
  }
}

// 2. Understand form structure
{
  "name": "browser_snapshot",
  "arguments": {}
}

// 3. Fill form fields sequentially
{
  "name": "browser_type",
  "arguments": {
    "element": "Name field",
    "ref": "input[name='name']",
    "text": "John Doe"
  }
}

{
  "name": "browser_type",
  "arguments": {
    "element": "Email field",
    "ref": "input[type='email']",
    "text": "john@example.com"
  }
}

{
  "name": "browser_type",
  "arguments": {
    "element": "Message textarea",
    "ref": "textarea[name='message']",
    "text": "This is my message content."
  }
}

// 4. Submit form
{
  "name": "browser_click",
  "arguments": {
    "element": "Submit button",
    "ref": "button[type='submit']"
  }
}

// 5. Verify submission
{
  "name": "browser_wait",
  "arguments": {
    "time": 3
  }
}

{
  "name": "browser_screenshot",
  "arguments": {}
}

​
Search and Data Extraction Patterns

Searching and extracting structured data from web pages is a common task. Here are patterns for performing searches and capturing results. 
  // 1. Navigate to search page
  {
    "name": "browser_navigate",
    "arguments": {
      "url": "https://example.com/search"
    }
  }

  // 2. Find search interface
  {
    "name": "browser_snapshot",
    "arguments": {}
  }

  // 3. Enter search query
  {
    "name": "browser_type",
    "arguments": {
      "element": "Search input box",
      "ref": "input[name='q']",
      "text": "browser automation tools",
      "submit": true
    }
  }

  // 4. Wait for results
  {
    "name": "browser_wait",
    "arguments": {
      "time": 3
    }
  }

  // 5. Capture results
  {
    "name": "browser_screenshot",
    "arguments": {
      "fullPage": true
    }
  }

  // 6. Analyze results structure
  {
    "name": "browser_snapshot",
    "arguments": {}
  }

​
Multi-Page Workflows

Many tasks require navigating through multiple pages. Here are patterns for sequential navigation and tab management. 
// Page 1: Login
{
  "name": "browser_navigate",
  "arguments": {
    "url": "https://app.example.com/login"
  }
}

{
  "name": "browser_snapshot",
  "arguments": {}
}

{
  "name": "browser_type",
  "arguments": {
    "element": "Username field",
    "ref": "input[name='username']",
    "text": "myusername"
  }
}

{
  "name": "browser_type",
  "arguments": {
    "element": "Password field",
    "ref": "input[type='password']",
    "text": "mypassword"
  }
}

{
  "name": "browser_click",
  "arguments": {
    "element": "Login button",
    "ref": "button[type='submit']"
  }
}

// Wait for login redirect
{
  "name": "browser_wait",
  "arguments": {
    "time": 3
  }
}

// Page 2: Dashboard
{
  "name": "browser_screenshot",
  "arguments": {}
}

{
  "name": "browser_click",
  "arguments": {
    "element": "Settings menu",
    "ref": "nav a[href='/settings']"
  }
}

// Page 3: Settings
{
  "name": "browser_wait",
  "arguments": {
    "time": 2
  }
}

{
  "name": "browser_snapshot",
  "arguments": {}
}

​
Advanced Interaction Patterns

Some web interactions require more complex sequences. Here are patterns for dropdowns, modals, and file uploads. 
// Hover to reveal menu
{
  "name": "browser_hover",
  "arguments": {
    "element": "Products menu trigger",
    "ref": "nav .products-dropdown"
  }
}

// Wait for dropdown animation
{
  "name": "browser_wait",
  "arguments": {
    "time": 0.5
  }
}

// Take snapshot to see revealed menu items
{
  "name": "browser_snapshot",
  "arguments": {}
}

// Click revealed menu item
{
  "name": "browser_click",
  "arguments": {
    "element": "Pricing link in dropdown",
    "ref": "nav .dropdown-menu a[href='/pricing']"
  }
}

​
Error Handling Patterns

The web is dynamic and unpredictable. Here are patterns for handling errors, retries, and verification. 
// Attempt interaction
{
  "name": "browser_click",
  "arguments": {
    "element": "Submit button",
    "ref": "button#submit"
  }
}

// If error occurs, take new snapshot and retry
{
  "name": "browser_wait",
  "arguments": {
    "time": 1
  }
}

{
  "name": "browser_snapshot",
  "arguments": {}
}

// Retry with updated reference
{
  "name": "browser_click",
  "arguments": {
    "element": "Submit button",
    "ref": "button.submit-btn"
  }
}

​
Workflow Templates

{
  "name": "browser_navigate",
  "arguments": {"url": "TARGET_URL"}
}
{
  "name": "browser_snapshot", 
  "arguments": {}
}
{
  "name": "browser_type",
  "arguments": {
    "element": "Name field",
    "ref": "REF_FROM_SNAPSHOT",
    "text": "USER_NAME"
  }
}
{
  "name": "browser_type",
  "arguments": {
    "element": "Email field",
    "ref": "REF_FROM_SNAPSHOT", 
    "text": "USER_EMAIL"
  }
}
{
  "name": "browser_type",
  "arguments": {
    "element": "Message field",
    "ref": "REF_FROM_SNAPSHOT",
    "text": "USER_MESSAGE"
  }
}
{
  "name": "browser_click",
  "arguments": {
    "element": "Submit button",
    "ref": "REF_FROM_SNAPSHOT"
  }
}
{
  "name": "browser_wait",
  "arguments": {"time": 3}
}
{
  "name": "browser_screenshot",
  "arguments": {}
}
⌘I