FastPlayWright Skill

High-performance browser automation with Fast Playwright MCP. Features token-optimized batch execution, intelligent element selection with fallback, diff detection for change tracking, and comprehensive diagnostics. Use for web testing, form automation, screenshots, navigation flows, and any browser-based task requiring efficient token usage.

frankausberlin@frankausberlin

Install

openclaw skills install @frankausberlin/fastplaywright

Fast Playwright MCP

High-performance browser automation skill using the Fast Playwright MCP server (@tontoko/fast-playwright-mcp). This fork of the Microsoft Playwright MCP provides significant token optimization, batch execution, and enhanced element discovery.

Key Advantages Over Standard Playwright MCP

Feature	Benefit
Token Optimization	70-80% reduction via `expectation` parameter
Batch Execution	90% token savings for multi-step workflows
Diff Detection	Track only changes, not full snapshots
Enhanced Selectors	Multiple selector types with automatic fallback
Diagnostic Tools	Advanced debugging and element discovery
Image Compression	JPEG format, quality control, resizing

MCP Configuration

json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@tontoko/fast-playwright-mcp@latest"]
    }
  }
}

Critical Workflow

Follow these steps in order for optimal results:

1. Navigate First

Use browser_navigate to load the target page before any other operations.

2. Use Batch Execution for Multi-Step Tasks

For 2+ operations, ALWAYS use browser_batch_execute instead of individual tool calls.

3. Optimize Token Usage

Apply expectation parameters to reduce response size.

4. Use Diff Detection for State Changes

Enable diffOptions when tracking changes without navigation.

Token Optimization

The Expectation Parameter

All browser tools support an expectation parameter to control response content:

json

{
  "includeSnapshot": false,    // 70-80% token reduction
  "includeConsole": false,      // Exclude console messages
  "includeTabs": false,         // Hide tab information
  "includeCode": false,         // Suppress code generation
  "includeDownloads": false     // Exclude download info
}

Snapshot Options

Limit snapshot content for focused analysis:

json

{
  "snapshotOptions": {
    "selector": ".main-content",  // Capture specific section only
    "maxLength": 2000,            // Limit character count
    "format": "aria"              // Use accessibility tree format
  }
}

Diff Detection

Track only changes between operations:

json

{
  "diffOptions": {
    "enabled": true,
    "format": "minimal",      // Options: unified, split, minimal
    "threshold": 0.1,
    "maxDiffLines": 50,
    "context": 3
  }
}

Enhanced Selector System

Selector Types (Priority Order)

ref - System-generated element ID from previous results (highest priority)
css - Standard CSS selectors (#id, .class, tag)
role - ARIA roles with optional text (button, textbox, etc.)
text - Text content search with optional tag filter

Selector Arrays with Fallback

All element-based tools accept multiple selectors with automatic fallback:

json

{
  "selectors": [
    { "css": "#submit-btn" },
    { "role": "button", "text": "Submit" },
    { "text": "Submit", "tag": "button" }
  ]
}

Selectors are tried in order until one succeeds. If multiple elements match, returns a candidate list for selection.

Batch Execution

Basic Pattern

Execute multiple operations in a single request:

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_navigate", "arguments": { "url": "https://example.com/login" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#username" }], "text": "user@example.com" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#password" }], "text": "password123" } },
      { "tool": "browser_click", "arguments": { "selectors": [{ "role": "button", "text": "Login" }] } }
    ]
  }
}

Advanced Configuration

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      {
        "tool": "browser_navigate",
        "arguments": { "url": "https://example.com" },
        "expectation": { "includeSnapshot": false },
        "continueOnError": true
      },
      {
        "tool": "browser_click",
        "arguments": { "selectors": [{ "css": "#submit" }] },
        "expectation": {
          "includeSnapshot": true,
          "snapshotOptions": { "selector": ".result-area" },
          "diffOptions": { "enabled": true, "format": "minimal" }
        }
      }
    ],
    "stopOnFirstError": false,
    "globalExpectation": {
      "includeConsole": false,
      "includeTabs": false
    }
  }
}

Error Handling Options

continueOnError (per-step): Continue even if this step fails
stopOnFirstError (global): Stop entire batch on first error

Common Patterns

Navigate and Screenshot

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_navigate", "arguments": { "url": "https://example.com" } },
      {
        "tool": "browser_take_screenshot",
        "arguments": {
          "filename": "homepage.png",
          "fullPage": true,
          "expectation": { "includeSnapshot": false }
        }
      }
    ]
  }
}

Form Filling with Submission

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_navigate", "arguments": { "url": "https://example.com/contact" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#name" }], "text": "John Doe" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#email" }], "text": "john@example.com" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#message" }], "text": "Hello World" } },
      { "tool": "browser_click", "arguments": { "selectors": [{ "role": "button", "text": "Send" }] } }
    ],
    "globalExpectation": { "includeSnapshot": false }
  }
}

Responsive Design Testing

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_navigate", "arguments": { "url": "https://example.com" } },
      { "tool": "browser_resize", "arguments": { "width": 1920, "height": 1080 } },
      { "tool": "browser_take_screenshot", "arguments": { "filename": "desktop.png" } },
      { "tool": "browser_resize", "arguments": { "width": 768, "height": 1024 } },
      { "tool": "browser_take_screenshot", "arguments": { "filename": "tablet.png" } },
      { "tool": "browser_resize", "arguments": { "width": 375, "height": 667 } },
      { "tool": "browser_take_screenshot", "arguments": { "filename": "mobile.png" } }
    ]
  }
}

Login Flow with Verification

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_navigate", "arguments": { "url": "https://example.com/login" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#email" }], "text": "user@example.com" } },
      { "tool": "browser_type", "arguments": { "selectors": [{ "css": "#password" }], "text": "secret", "submit": true } },
      { "tool": "browser_wait_for", "arguments": { "text": "Dashboard" } }
    ],
    "globalExpectation": { "diffOptions": { "enabled": true } }
  }
}

Diagnostic Tools

Find Elements

Search for elements using multiple criteria:

json

{
  "tool": "browser_find_elements",
  "arguments": {
    "searchCriteria": {
      "text": "Submit",
      "role": "button"
    },
    "maxResults": 5,
    "enableEnhancedDiscovery": true
  }
}

Page Diagnostics

Comprehensive page analysis:

json

{
  "tool": "browser_diagnose",
  "arguments": {
    "diagnosticLevel": "detailed",
    "includePerformanceMetrics": true,
    "includeAccessibilityInfo": true,
    "includeTroubleshootingSuggestions": true
  }
}

Diagnostic levels: none, basic, standard, detailed, full

HTML Inspection

Extract and analyze HTML content:

json

{
  "tool": "browser_inspect_html",
  "arguments": {
    "selectors": [{ "css": ".content" }],
    "depth": 3,
    "maxSize": 50000,
    "format": "html",
    "optimizeForLLM": true
  }
}

Image Optimization

Compressed Screenshots

json

{
  "tool": "browser_take_screenshot",
  "arguments": {
    "filename": "screenshot.jpg",
    "type": "jpeg",
    "expectation": {
      "imageOptions": {
        "format": "jpeg",
        "quality": 50,
        "maxWidth": 1280
      }
    }
  }
}

Network Request Filtering

Monitor specific network activity:

json

{
  "tool": "browser_network_requests",
  "arguments": {
    "urlPatterns": ["/api/"],
    "excludeUrlPatterns": ["analytics", "tracking"],
    "methods": ["GET", "POST"],
    "statusRanges": [{ "min": 200, "max": 299 }],
    "maxRequests": 10,
    "newestFirst": true
  }
}

Tab Management

Multi-Tab Workflow

json

{
  "tool": "browser_batch_execute",
  "arguments": {
    "steps": [
      { "tool": "browser_tab_new", "arguments": { "url": "https://example.com" } },
      { "tool": "browser_tab_list", "arguments": {} },
      { "tool": "browser_tab_select", "arguments": { "index": 0 } },
      { "tool": "browser_tab_close", "arguments": { "index": 1 } }
    ]
  }
}

Wait Strategies

Wait for Text

json

{ "tool": "browser_wait_for", "arguments": { "text": "Loading complete" } }

Wait for Text to Disappear

json

{ "tool": "browser_wait_for", "arguments": { "textGone": "Loading..." } }

Wait for Time

json

{ "tool": "browser_wait_for", "arguments": { "time": 2 } }

Console Monitoring

Filter Console Messages

json

{
  "tool": "browser_console_messages",
  "arguments": {
    "consoleOptions": {
      "levels": ["error", "warn"],
      "maxMessages": 10,
      "patterns": ["^Error:"],
      "removeDuplicates": true
    }
  }
}

JavaScript Evaluation

Page-Level Evaluation

json

{
  "tool": "browser_evaluate",
  "arguments": {
    "function": "() => document.title"
  }
}

Element-Level Evaluation

json

{
  "tool": "browser_evaluate",
  "arguments": {
    "selectors": [{ "css": "#counter" }],
    "function": "(element) => element.textContent"
  }
}

Dialog Handling

json

{
  "tool": "browser_handle_dialog",
  "arguments": {
    "accept": true,
    "promptText": "Optional prompt response"
  }
}

File Upload

json

{
  "tool": "browser_file_upload",
  "arguments": {
    "paths": ["/absolute/path/to/file.pdf"]
  }
}

Drag and Drop

json

{
  "tool": "browser_drag",
  "arguments": {
    "startSelectors": [{ "css": "#draggable" }],
    "endSelectors": [{ "css": "#dropzone" }]
  }
}

Select Options

json

{
  "tool": "browser_select_option",
  "arguments": {
    "selectors": [{ "css": "#country" }],
    "values": ["us", "de"]
  }
}

Keyboard Input

json

{
  "tool": "browser_press_key",
  "arguments": {
    "key": "Enter"
  }
}

Special keys: Enter, Tab, Escape, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Backspace, Delete, Home, End

Best Practices

Token Efficiency

Use batch execution for 2+ operations
Disable snapshots for intermediate steps
Enable diff detection for state tracking
Filter console messages to relevant levels
Use selective snapshots with CSS selectors
Compress images when quality is not critical

Selector Strategy

Use ref from previous results when available
Provide fallback selectors for robustness
Prefer role-based selectors for accessibility
Use CSS selectors for specific targeting
Text selectors as last resort

Error Handling

Use continueOnError for non-critical steps
Set stopOnFirstError: false for best-effort execution
Use diagnostic tools when automation fails
Check console messages for JavaScript errors

Performance

Minimize snapshot size with selectors
Use minimal diff format for change tracking
Filter network requests to relevant patterns
Batch related operations together

Troubleshooting

Element Not Found

Use browser_find_elements to discover alternatives
Run browser_diagnose for page analysis
Check for iframes or shadow DOM
Verify page has finished loading

Timeout Issues

Use browser_wait_for with specific conditions
Increase wait time for slow pages
Check network requests for blocked resources

Token Overflow

Enable includeSnapshot: false
Use snapshotOptions.selector to limit scope
Enable diffOptions.enabled: true
Reduce maxRequests in network filtering

Tool Reference

Core Automation

browser_navigate - Navigate to URL
browser_click - Click element
browser_type - Type text
browser_hover - Hover over element
browser_drag - Drag and drop
browser_select_option - Select dropdown option
browser_press_key - Press keyboard key
browser_file_upload - Upload files
browser_evaluate - Execute JavaScript
browser_wait_for - Wait for condition

Batch Operations

browser_batch_execute - Execute multiple actions

Information Gathering

browser_snapshot - Capture accessibility snapshot
browser_take_screenshot - Take screenshot
browser_console_messages - Get console output
browser_network_requests - List network requests
browser_find_elements - Find elements by criteria
browser_diagnose - Page diagnostics
browser_inspect_html - HTML content extraction

Tab Management

browser_tab_list - List all tabs
browser_tab_new - Open new tab
browser_tab_select - Switch to tab
browser_tab_close - Close tab

Navigation

browser_navigate_back - Go back
browser_navigate_forward - Go forward

Browser Control

browser_resize - Resize window
browser_close - Close browser
browser_install - Install browser
browser_handle_dialog - Handle alerts/confirms

Vision (requires `--caps=vision`)

browser_mouse_click_xy - Click at coordinates
browser_mouse_move_xy - Move mouse to coordinates
browser_mouse_drag_xy - Drag between coordinates

PDF (requires `--caps=pdf`)

browser_pdf_save - Save page as PDF

FastPlayWright Skill

Install

Fast Playwright MCP

Key Advantages Over Standard Playwright MCP

MCP Configuration

Critical Workflow

1. Navigate First

2. Use Batch Execution for Multi-Step Tasks

3. Optimize Token Usage

4. Use Diff Detection for State Changes

Token Optimization

The Expectation Parameter

Snapshot Options

Diff Detection

Enhanced Selector System

Selector Types (Priority Order)

Selector Arrays with Fallback

Batch Execution

Basic Pattern

Advanced Configuration

Error Handling Options

Common Patterns

Navigate and Screenshot

Form Filling with Submission

Responsive Design Testing

Login Flow with Verification

Diagnostic Tools

Find Elements

Page Diagnostics

HTML Inspection

Image Optimization

Compressed Screenshots

Network Request Filtering

Tab Management

Multi-Tab Workflow

Wait Strategies

Wait for Text

Wait for Text to Disappear

Wait for Time

Console Monitoring

Filter Console Messages

JavaScript Evaluation

Page-Level Evaluation

Element-Level Evaluation

Dialog Handling

File Upload

Drag and Drop

Select Options

Keyboard Input

Best Practices

Token Efficiency

Selector Strategy

Error Handling

Performance

Troubleshooting

Element Not Found

Timeout Issues

Token Overflow

Tool Reference

Core Automation

Batch Operations

Information Gathering

Tab Management

Navigation

Browser Control

Vision (requires --caps=vision)

PDF (requires --caps=pdf)

Related skills

Vision (requires `--caps=vision`)

PDF (requires `--caps=pdf`)