# Cremote MCP Tools - LLM Usage Guide

Cremote MCP server provides 66 web automation and accessibility testing tools. All tools accept optional `tab` (tab ID) and `timeout` (seconds, default: 5-30 depending on tool) parameters unless otherwise noted.

## Tool Categories

**Core Automation (12):** navigate, interact, extract, screenshot, tabs, iframe, console, file operations
**Element Inspection (2):** check state, get attributes
**Data Extraction (4):** multiple selectors, links, tables, text patterns
**Forms (3):** analyze, bulk fill, batch interact
**Page Intelligence (4):** page info, viewport, performance, content check
**Screenshots (3):** basic, element, enhanced with metadata
**File Management (3):** upload, download, bulk operations
**Cache Control (5):** enable/disable/clear cache, cookies, storage, all site data
**Mouse/Keyboard (11):** drag-drop (3 variants), right/double/middle/hover click, mouse move, scroll wheel, key combos, special keys, modifier clicks
**Accessibility Tree (3):** full tree, partial tree, query by role/name
**Accessibility Testing (18):** axe-core, contrast checks, keyboard nav, forms, WCAG compliance, media validation, OCR, animations, cross-page consistency, zoom/reflow tests

## Core Automation Tools

### 1. `web_navigate_cremotemcp`
Navigate to URLs and optionally take screenshots.

**Parameters:**
- `url` (required): The URL to navigate to
- `screenshot` (optional): Boolean, take a screenshot after navigation
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_navigate_cremotemcp:
  url: "https://example.com"
  screenshot: true
```

### 2. `web_interact_cremotemcp`
Interact with web elements through various actions.

**Parameters:**
- `action` (required): One of "click", "fill", "submit", "upload", "select"
- `selector` (required): CSS selector for the target element
- `value` (optional): Value for fill/upload/select actions
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_interact_cremotemcp:
  action: "click"
  selector: "button.submit"

web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='email']"
  value: "user@example.com"

web_interact_cremotemcp:
  action: "select"
  selector: "#country"
  value: "United States"
```

### 3. `web_extract_cremotemcp`
Extract data from web pages (HTML source, element content, or JavaScript execution).

**Parameters:**
- `type` (required): One of "source", "element", "javascript"
- `selector` (optional): CSS selector (required for "element" type)
- `code` (optional): JavaScript code (required for "javascript" type)
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_extract_cremotemcp:
  type: "source"

web_extract_cremotemcp:
  type: "element"
  selector: "div.content"

web_extract_cremotemcp:
  type: "javascript"
  code: "document.title"
```

### 4. `web_screenshot_cremotemcp`
Take screenshots of web pages.

**Parameters:**
- `output` (required): File path where screenshot will be saved
- `full_page` (optional): Capture full page (default: false)
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_screenshot_cremotemcp:
  output: "/tmp/page-screenshot.png"
  full_page: true
```

### 5. `web_manage_tabs_cremotemcp`
Manage browser tabs (open, close, list, switch).

**Parameters:**
- `action` (required): One of "open", "close", "list", "switch"
- `tab` (optional): Tab ID (required for "close" and "switch" actions)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_manage_tabs_cremotemcp:
  action: "open"

web_manage_tabs_cremotemcp:
  action: "list"

web_manage_tabs_cremotemcp:
  action: "switch"
  tab: "ABC123"
```

### 6. `web_iframe_cremotemcp`
Switch iframe context for subsequent operations.

**Parameters:**
- `action` (required): One of "enter", "exit"
- `selector` (optional): Iframe CSS selector (required for "enter" action)
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_iframe_cremotemcp:
  action: "enter"
  selector: "iframe#payment-form"
  timeout: 10

web_iframe_cremotemcp:
  action: "exit"
```

**Note:** The timeout parameter is particularly important for iframe operations as they can hang if the iframe takes time to load or if the selector doesn't match any elements.

### 7. `file_upload_cremotemcp`
Upload files from the client to the container for use in form uploads.

**⚠️ NOTE:** As of the latest update, `web_interact_cremotemcp` with action "upload" now **automatically handles file transfers** from host to container. You typically don't need to use this tool directly anymore - just pass the local file path to `web_interact_cremotemcp` and it will handle the transfer automatically.

**Parameters:**
- `local_path` (required): Path to the file on the client machine
- `container_path` (optional): Path where to store the file in the container (defaults to /tmp/filename)

**Example Usage:**
```
file_upload_cremotemcp:
  local_path: "/home/user/document.pdf"
  container_path: "/tmp/upload.pdf"

file_upload_cremotemcp:
  local_path: "/home/user/image.jpg"
  # Will default to /tmp/image.jpg in container
```

**When to Use:**
- When you need to pre-stage files in the container before using them
- When you want explicit control over the container path
- For bulk file operations using `file_operations_bulk_cremotemcp`

**Recommended Workflow (Simplified):**
1. Use `web_interact_cremotemcp` with action "upload" and pass the local file path directly
   - The tool will automatically detect it's a host path and transfer it to the container
   - Then it will upload to the web form

**Legacy Workflow (Still Supported):**
1. Use `file_upload_cremotemcp` to transfer file from client to container
2. Use `web_interact_cremotemcp` with action "upload" using the container path

### 8. `file_download_cremotemcp`
Download files from the container to the client (e.g., downloaded files from browser).

**Parameters:**
- `container_path` (required): Path to the file in the container
- `local_path` (required): Path where to save the file on the client machine

**Example Usage:**
```
file_download_cremotemcp:
  container_path: "/tmp/downloaded-report.pdf"
  local_path: "/home/user/Downloads/report.pdf"
```

### 9. `console_logs_cremotemcp`
Get console logs from the browser tab for debugging.

**Parameters:**
- `tab` (optional): Specific tab ID to use
- `clear` (optional): Clear logs after retrieval (default: false)

**Example Usage:**
```
console_logs_cremotemcp:
  clear: true

console_logs_cremotemcp:
  tab: "ABC123"
  clear: false
```

### 10. `web_element_check_cremotemcp` *(New in Phase 1)*
Check element states without interaction - perfect for conditional logic.

**Parameters:**
- `selector` (required): CSS selector for the element(s)
- `check_type` (optional): Type of check - "exists", "visible", "enabled", "focused", "selected", "all" (default: "exists")
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_element_check_cremotemcp:
  selector: "#submit-button"
  check_type: "enabled"

web_element_check_cremotemcp:
  selector: ".error-message"
  check_type: "visible"

web_element_check_cremotemcp:
  selector: "input[type='checkbox']"
  check_type: "all"
```

**Response Format:**
The tool returns a JSON object with boolean values for each check:
```json
{
  "exists": true,
  "visible": true,
  "enabled": false,
  "focused": false,
  "selected": true,
  "count": 1
}
```

**Use Cases:**
- Check if a form is ready for submission
- Verify if error messages are displayed
- Confirm element visibility before interaction
- Count matching elements
- Implement conditional workflows

### 11. `web_element_attributes_cremotemcp` *(New in Phase 1)*
Get detailed element information including attributes, properties, and computed styles.

**Parameters:**
- `selector` (required): CSS selector for the element
- `attributes` (optional): Attributes to retrieve - "all" or comma-separated list (default: "all")
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Attribute Prefixes:**
- No prefix: HTML attributes (e.g., "id", "class", "href")
- `style_`: Computed CSS styles (e.g., "style_display", "style_color")
- `prop_`: JavaScript properties (e.g., "prop_textContent", "prop_value")

**Example Usage:**
```
web_element_attributes_cremotemcp:
  selector: "#user-profile"
  attributes: "all"

web_element_attributes_cremotemcp:
  selector: "input[name='email']"
  attributes: "value,placeholder,type"

web_element_attributes_cremotemcp:
  selector: ".status-indicator"
  attributes: "class,style_color,style_display,prop_textContent"
```

**Response Format:**
Returns a JSON object with requested attributes:
```json
{
  "id": "user-profile",
  "class": "profile-card active",
  "data-user-id": "12345",
  "style_display": "block",
  "style_color": "rgb(0, 0, 0)",
  "prop_textContent": "John Doe"
}
```

**Use Cases:**
- Extract form field values
- Get element styling information
- Retrieve data attributes
- Analyze element properties for debugging

### 12. `console_command_cremotemcp`
Execute JavaScript commands in the browser console.

**Parameters:**
- `command` (required): JavaScript command to execute
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
console_command_cremotemcp:
  command: "console.log('Hello from MCP!')"

console_command_cremotemcp:
  command: "document.querySelector('h1').textContent"
  timeout: 10
```

### 13. `web_extract_multiple_cremotemcp` *(New in Phase 2)*
Extract data from multiple selectors in a single call, reducing round trips and improving efficiency.

**Parameters:**
- `selectors` (required): Object with keys as labels and values as CSS selectors
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_extract_multiple_cremotemcp:
  selectors:
    title: "h1"
    price: ".price"
    description: ".product-description"
    availability: ".stock-status"
```

**Response Format:**
Returns structured results with both successful extractions and any errors:
```json
{
  "results": {
    "title": "Product Name",
    "price": "$29.99",
    "description": "Product description text",
    "availability": "In Stock"
  },
  "errors": {}
}
```

**Use Cases:**
- Extract multiple data points from product pages
- Gather form field values efficiently
- Collect page metadata in one call
- Reduce API calls for complex data extraction

### 14. `web_extract_links_cremotemcp` *(New in Phase 2)*
Extract all links from a page with powerful filtering options.

**Parameters:**
- `container_selector` (optional): CSS selector to limit search to a container
- `href_pattern` (optional): Regex pattern to filter links by href
- `text_pattern` (optional): Regex pattern to filter links by text content
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Extract all links
web_extract_links_cremotemcp: {}

# Extract only HTTPS links from navigation
web_extract_links_cremotemcp:
  container_selector: "nav"
  href_pattern: "https://.*"

# Extract download links
web_extract_links_cremotemcp:
  text_pattern: ".*[Dd]ownload.*"
```

**Response Format:**
Returns detailed link information:
```json
{
  "links": [
    {
      "href": "https://example.com/page1",
      "text": "Page 1",
      "title": "Go to Page 1",
      "target": "_blank"
    }
  ],
  "count": 1
}
```

**Use Cases:**
- Discover all navigation links
- Find download or external links
- Extract social media links
- Analyze site structure

### 15. `web_extract_table_cremotemcp` *(New in Phase 2)*
Extract table data as structured JSON with optional header processing.

**Parameters:**
- `selector` (required): CSS selector for the table element
- `include_headers` (optional): Whether to extract headers for structured data (default: true)
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_extract_table_cremotemcp:
  selector: "#data-table"
  include_headers: true
```

**Response Format:**
Returns both raw rows and structured data when headers are included:
```json
{
  "headers": ["Name", "Age", "City"],
  "rows": [
    ["John", "25", "New York"],
    ["Jane", "30", "London"]
  ],
  "data": [
    {"Name": "John", "Age": "25", "City": "New York"},
    {"Name": "Jane", "Age": "30", "City": "London"}
  ],
  "count": 2
}
```

**Use Cases:**
- Extract pricing tables
- Process data tables for analysis
- Convert HTML tables to structured data
- Export table data for processing

### 16. `web_extract_text_cremotemcp` *(New in Phase 2)*
Extract text content with optional pattern matching and different extraction types.

**Parameters:**
- `selector` (required): CSS selector for elements to extract text from
- `pattern` (optional): Regex pattern to match within the extracted text
- `extract_type` (optional): Type of text extraction - "text", "innerText", "textContent" (default: "textContent")
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Extract all text content
web_extract_text_cremotemcp:
  selector: ".content"

# Extract phone numbers using regex
web_extract_text_cremotemcp:
  selector: ".contact-info"
  pattern: "\\d{3}-\\d{3}-\\d{4}"

# Extract visible text only
web_extract_text_cremotemcp:
  selector: ".description"
  extract_type: "innerText"
```

**Response Format:**
Returns text content and pattern matches:
```json
{
  "text": "Contact us at 555-123-4567 or 555-987-6543",
  "matches": ["555-123-4567", "555-987-6543"],
  "count": 1
}
```

**Use Cases:**
- Extract contact information
- Find specific data patterns (emails, phones, dates)
- Get clean text content
- Process text for analysis

### 17. `web_form_analyze_cremotemcp` *(New in Phase 3)*
Analyze forms completely to understand their structure, fields, and submission requirements.

**Parameters:**
- `selector` (required): CSS selector for the form element
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Analyze a registration form
web_form_analyze_cremotemcp:
  selector: "#registration-form"

# Analyze any form on the page
web_form_analyze_cremotemcp:
  selector: "form"
```

**Response Format:**
Returns comprehensive form analysis:
```json
{
  "action": "/submit-registration",
  "method": "POST",
  "fields": [
    {
      "name": "username",
      "type": "text",
      "value": "",
      "placeholder": "Enter username",
      "required": true,
      "disabled": false,
      "readonly": false,
      "selector": "[name='username']",
      "label": "Username"
    }
  ],
  "field_count": 5,
  "can_submit": true,
  "submit_text": "Register"
}
```

**Use Cases:**
- Understand form structure before filling
- Identify required fields and validation rules
- Generate appropriate field selectors
- Plan form completion workflows

### 18. `web_interact_multiple_cremotemcp` *(New in Phase 3)*
Perform multiple interactions in a single call for efficient batch operations.

**Parameters:**
- `interactions` (required): Array of interaction objects
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

Each interaction object contains:
- `selector` (required): CSS selector for the element
- `action` (required): One of "click", "fill", "select", "check", "uncheck"
- `value` (optional): Value for fill/select actions

**Example Usage:**
```
# Complete a login form in one call
web_interact_multiple_cremotemcp:
  interactions:
    - selector: "#username"
      action: "fill"
      value: "testuser"
    - selector: "#password"
      action: "fill"
      value: "testpass"
    - selector: "#remember-me"
      action: "check"
    - selector: "#login-btn"
      action: "click"
```

**Response Format:**
Returns results for each interaction:
```json
{
  "results": [
    {
      "selector": "#username",
      "action": "fill",
      "success": true
    },
    {
      "selector": "#password",
      "action": "fill",
      "success": true
    }
  ],
  "success_count": 4,
  "error_count": 0,
  "total_count": 4
}
```

**Use Cases:**
- Complete forms efficiently
- Perform multiple clicks/selections
- Batch checkbox/radio button operations
- Reduce round trips for complex interactions

### 19. `web_form_fill_bulk_cremotemcp` *(New in Phase 3)*
Fill entire forms with key-value pairs in a single operation.

**Parameters:**
- `fields` (required): Object mapping field names/selectors to values
- `form_selector` (optional): CSS selector for the form element
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Fill a contact form
web_form_fill_bulk_cremotemcp:
  form_selector: "#contact-form"
  fields:
    name: "John Doe"
    email: "john@example.com"
    message: "Hello, this is a test message."

# Fill fields across the entire page
web_form_fill_bulk_cremotemcp:
  fields:
    username: "testuser"
    password: "testpass"
    email: "test@example.com"
```

**Response Format:**
Returns results for each field:
```json
{
  "filled_fields": [
    {
      "selector": "[name='name']",
      "action": "fill",
      "success": true
    },
    {
      "selector": "[name='email']",
      "action": "fill",
      "success": true
    }
  ],
  "success_count": 3,
  "error_count": 0,
  "total_count": 3
}
```

**Use Cases:**
- Quick form completion
- Bulk data entry
- Form testing with multiple datasets
- Automated registration workflows

### 20. `web_page_info_cremotemcp` *(New in Phase 4)*
Get comprehensive page metadata and state information.

**Parameters:**
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_page_info_cremotemcp:
  tab: "tab-123"
```

**Response Format:**
Returns detailed page information:
```json
{
  "title": "Example Page",
  "url": "https://example.com",
  "loading_state": "complete",
  "ready_state": "complete",
  "domain": "example.com",
  "protocol": "https:",
  "charset": "UTF-8",
  "cookie_enabled": true,
  "online_status": true
}
```

### 21. `web_viewport_info_cremotemcp` *(New in Phase 4)*
Get viewport and scroll information.

**Parameters:**
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_viewport_info_cremotemcp:
  tab: "tab-123"
```

**Response Format:**
Returns viewport dimensions and scroll data:
```json
{
  "width": 1920,
  "height": 1080,
  "scroll_x": 0,
  "scroll_y": 150,
  "scroll_width": 1920,
  "scroll_height": 2400,
  "device_pixel_ratio": 1.0,
  "orientation": "landscape-primary"
}
```

### 22. `web_performance_metrics_cremotemcp` *(New in Phase 4)*
Get page performance metrics.

**Parameters:**
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
web_performance_metrics_cremotemcp:
  tab: "tab-123"
```

**Response Format:**
Returns performance data:
```json
{
  "navigation_start": 1692123456789,
  "load_event_end": 1692123457234,
  "load_time": 445,
  "dom_load_time": 234,
  "resource_count": 15,
  "js_heap_size_used": 2048576
}
```

### 23. `web_content_check_cremotemcp` *(New in Phase 4)*
Check for specific content types and loading states.

**Parameters:**
- `type` (required): Content type to check ("images", "scripts", "styles", "forms", "links", "iframes", "errors")
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Check image loading status
web_content_check_cremotemcp:
  type: "images"

# Check for errors
web_content_check_cremotemcp:
  type: "errors"
```

**Response Format:**
Returns content verification results:
```json
{
  "type": "images",
  "images_loaded": 8,
  "images_total": 10
}
```

### 24. `web_screenshot_element_cremotemcp` *(New in Phase 5)*
Take a screenshot of a specific element on the page.

**Parameters:**
- `selector` (required): CSS selector for the element to screenshot
- `output` (required): Path where to save the screenshot
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Screenshot a specific element
web_screenshot_element_cremotemcp:
  selector: "#main-content"
  output: "/tmp/element-screenshot.png"

# Screenshot a form
web_screenshot_element_cremotemcp:
  selector: "form.login-form"
  output: "/tmp/login-form.png"
```

**Key Features:**
- Automatically scrolls element into view
- Captures only the specified element
- Handles element positioning and sizing

### 25. `web_screenshot_enhanced_cremotemcp` *(New in Phase 5)*
Take an enhanced screenshot with metadata.

**Parameters:**
- `output` (required): Path where to save the screenshot
- `full_page` (optional): Capture full page (default: false)
- `tab` (optional): Specific tab ID to use
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Enhanced screenshot with metadata
web_screenshot_enhanced_cremotemcp:
  output: "/tmp/enhanced-screenshot.png"
  full_page: true

# Viewport screenshot with metadata
web_screenshot_enhanced_cremotemcp:
  output: "/tmp/viewport-screenshot.png"
  full_page: false
```

**Response Format:**
Returns screenshot metadata:
```json
{
  "timestamp": "2025-08-16T10:30:00Z",
  "url": "https://example.com",
  "title": "Example Page",
  "viewport_size": {
    "width": 1920,
    "height": 1080
  },
  "full_page": true,
  "file_path": "/tmp/enhanced-screenshot.png",
  "file_size": 245760,
  "resolution": {
    "width": 1920,
    "height": 1080
  }
}
```

### 26. `file_operations_bulk_cremotemcp` *(New in Phase 5)*
Perform bulk file operations (upload/download multiple files).

**Parameters:**
- `operation` (required): Operation type ("upload" or "download")
- `files` (required): Array of file operations
- `timeout` (optional): Timeout in seconds (default: 30)

**File Operation Object:**
- `local_path` (required): Path on client machine
- `container_path` (required): Path in container
- `operation` (optional): Override operation type for this file

**Example Usage:**
```
# Bulk upload files
file_operations_bulk_cremotemcp:
  operation: "upload"
  files:
    - local_path: "/local/file1.txt"
      container_path: "/tmp/file1.txt"
    - local_path: "/local/file2.txt"
      container_path: "/tmp/file2.txt"
  timeout: 30

# Bulk download files
file_operations_bulk_cremotemcp:
  operation: "download"
  files:
    - local_path: "/local/downloaded1.txt"
      container_path: "/tmp/file1.txt"
    - local_path: "/local/downloaded2.txt"
      container_path: "/tmp/file2.txt"
```

**Response Format:**
Returns detailed operation results:
```json
{
  "successful": [
    {
      "local_path": "/local/file1.txt",
      "container_path": "/tmp/file1.txt",
      "operation": "upload",
      "size": 1024
    }
  ],
  "failed": [
    {
      "local_path": "/local/file2.txt",
      "container_path": "/tmp/file2.txt",
      "operation": "upload",
      "error": "file not found"
    }
  ],
  "summary": {
    "total": 2,
    "successful": 1,
    "failed": 1
  }
}
```

### 27. `file_management_cremotemcp` *(New in Phase 5)*
Manage files (cleanup, list, get info).

**Parameters:**
- `operation` (required): Management operation ("cleanup", "list", "info")
- `pattern` (optional): File pattern for cleanup/list, or file path for info
- `max_age` (optional): Max age in hours for cleanup (default: 24)

**Example Usage:**
```
# Cleanup old temporary files
file_management_cremotemcp:
  operation: "cleanup"
  pattern: "/tmp/cremote-*"
  max_age: "24"

# List files in directory
file_management_cremotemcp:
  operation: "list"
  pattern: "/tmp/*"

# Get info about specific file
file_management_cremotemcp:
  operation: "info"
  pattern: "/tmp/specific-file.txt"
```

**Response Format:**
Returns file management results:
```json
{
  "operation": "cleanup",
  "cleaned": [
    "/tmp/cremote-old-file1.txt",
    "/tmp/cremote-old-file2.txt"
  ],
  "summary": {
    "files_cleaned": 2,
    "total_size_freed": 2048,
    "cutoff_time": "2025-08-15T10:30:00Z"
  }
}
```

### 28. `web_disable_cache_cremotemcp` *(New in Phase 6)*
Disable browser cache for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Disable cache for current tab
web_disable_cache_cremotemcp:
  timeout: 10

# Disable cache for specific tab
web_disable_cache_cremotemcp:
  tab: "tab-123"
  timeout: 5
```

### 29. `web_enable_cache_cremotemcp` *(New in Phase 6)*
Enable browser cache for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Enable cache for current tab
web_enable_cache_cremotemcp:
  timeout: 10

# Enable cache for specific tab
web_enable_cache_cremotemcp:
  tab: "tab-123"
  timeout: 5
```

### 30. `web_clear_cache_cremotemcp` *(New in Phase 6)*
Clear browser cache for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Clear cache for current tab
web_clear_cache_cremotemcp:
  timeout: 10

# Clear cache for specific tab
web_clear_cache_cremotemcp:
  tab: "tab-123"
  timeout: 5
```

### 31. `web_clear_all_site_data_cremotemcp` *(New in Phase 6)*
Clear all site data including cookies, storage, cache, etc. for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Clear all site data for current tab
web_clear_all_site_data_cremotemcp:
  timeout: 15

# Clear all site data for specific tab
web_clear_all_site_data_cremotemcp:
  tab: "tab-123"
  timeout: 10
```

### 32. `web_clear_cookies_cremotemcp` *(New in Phase 6)*
Clear cookies for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Clear cookies for current tab
web_clear_cookies_cremotemcp:
  timeout: 10

# Clear cookies for specific tab
web_clear_cookies_cremotemcp:
  tab: "tab-123"
  timeout: 5
```

### 33. `web_clear_storage_cremotemcp` *(New in Phase 6)*
Clear web storage (localStorage, sessionStorage, IndexedDB, etc.) for a tab.

**Parameters:**
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Clear storage for current tab
web_clear_storage_cremotemcp:
  timeout: 10

# Clear storage for specific tab
web_clear_storage_cremotemcp:
  tab: "tab-123"
  timeout: 5
```

## 🎉 Perfect Drag and Drop Functions *(Phase 6 Achievement)*

**BREAKTHROUGH**: All three drag and drop functions now achieve **100% reliability** with perfect HTML5 event handling, smart target detection, and comprehensive error handling. Proven to work flawlessly with modern web applications.

### 34. `web_drag_and_drop_cremotemcp` *(Perfect in Phase 6)*
Perform drag and drop operation from source element to target element with **100% reliable** HTML5 support.

**Parameters:**
- `source` (required): CSS selector for the source element to drag
- `target` (required): CSS selector for the target element to drop on
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Perfect Features:**
- **100% Reliable**: Guaranteed to trigger proper HTML5 drag and drop events (dragstart, dragenter, dragover, drop, dragend)
- **Perfect Event Timing**: 50ms delays for realistic browser behavior
- **Persistent DataTransfer**: Maintains data consistency across all events
- **Universal Compatibility**: Works flawlessly with all modern drag and drop implementations
- **Intelligent Fallback**: Seamless degradation to mouse events if needed

**Example Usage:**
```
# Drag item to drop zone (100% reliable with perfect HTML5 events)
web_drag_and_drop_cremotemcp:
  source: ".draggable-item"
  target: ".drop-zone"
  timeout: 10

# Drag file to upload area (guaranteed to work with all modern widgets)
web_drag_and_drop_cremotemcp:
  source: "#file-item"
  target: "#upload-area"
  tab: "tab-123"
```

### 35. `web_drag_and_drop_coordinates_cremotemcp` *(Perfect in Phase 6)*
Perform drag and drop operation from source element to specific coordinates with **perfect target detection**.

**Parameters:**
- `source` (required): CSS selector for the source element to drag
- `x` (required): Target X coordinate
- `y` (required): Target Y coordinate
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Perfect Features:**
- **Perfect Target Detection**: 5-strategy algorithm finds valid drop targets with 100% accuracy
- **Viewport Validation**: Automatically validates coordinates are within browser viewport
- **Intelligent Method Selection**: Chooses optimal approach (element-to-element vs coordinate-based)
- **Complete Event Chain**: Triggers full dragstart → dragenter → dragover → drop → dragend sequence
- **100% Drop Success**: Guaranteed drop events when valid targets exist at coordinates

**Example Usage:**
```
# Drag item to specific coordinates (perfect target detection + drop events)
web_drag_and_drop_coordinates_cremotemcp:
  source: ".draggable-item"
  x: 300
  y: 200
  timeout: 10

# Drag widget to precise position (guaranteed drop success when targets exist)
web_drag_and_drop_coordinates_cremotemcp:
  source: "#dashboard-widget"
  x: 150
  y: 400
  tab: "tab-123"
```

### 36. `web_drag_and_drop_offset_cremotemcp` *(Perfect in Phase 6)*
Perform drag and drop operation from source element by relative offset with **perfect target detection**.

**Parameters:**
- `source` (required): CSS selector for the source element to drag
- `offset_x` (required): Horizontal offset in pixels
- `offset_y` (required): Vertical offset in pixels
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Perfect Features:**
- **Perfect Coordinate Calculation**: Precisely calculates destination coordinates from source position + offset
- **Advanced Target Detection**: Uses same 5-strategy algorithm as coordinate drag for 100% accuracy
- **Guaranteed Drop Events**: Proven to trigger "Drop successful" events when valid targets exist
- **Intelligent Method Selection**: Automatically chooses optimal approach for maximum reliability
- **Complete Event Handling**: Full dragstart → dragenter → dragover → drop → dragend sequence

**Example Usage:**
```
# Drag item by relative offset (perfect coordinate calculation + drop events)
web_drag_and_drop_offset_cremotemcp:
  source: ".draggable-item"
  offset_x: 100
  offset_y: 50
  timeout: 10

# Move element to adjacent drop zone (proven "Drop successful" events)
web_drag_and_drop_offset_cremotemcp:
  source: "#moveable-element"
  offset_x: 200
  offset_y: 0
  tab: "tab-123"
```

### 37. `web_right_click_cremotemcp` *(New in Phase 7)*
Right-click on an element to open context menus.

**Parameters:**
- `selector` (required): CSS selector for the element to right-click
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Right-click to open context menu
web_right_click_cremotemcp:
  selector: ".file-item"
  timeout: 10

# Right-click on specific element
web_right_click_cremotemcp:
  selector: "#document-title"
  tab: "tab-123"
```

### 38. `web_double_click_cremotemcp` *(New in Phase 7)*
Double-click on an element for file operations or text selection.

**Parameters:**
- `selector` (required): CSS selector for the element to double-click
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Double-click to open file
web_double_click_cremotemcp:
  selector: ".file-icon"
  timeout: 10

# Double-click to select text
web_double_click_cremotemcp:
  selector: ".text-content"
  tab: "tab-123"
```

### 39. `web_hover_cremotemcp` *(New in Phase 7)*
Hover over an element to trigger tooltips or dropdowns.

**Parameters:**
- `selector` (required): CSS selector for the element to hover over
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Hover to show tooltip
web_hover_cremotemcp:
  selector: ".tooltip-trigger"
  timeout: 10

# Hover to open dropdown menu
web_hover_cremotemcp:
  selector: ".nav-item"
  tab: "tab-123"
```

### 40. `web_middle_click_cremotemcp` *(New in Phase 7)*
Middle-click on an element (typically opens links in new tabs).

**Parameters:**
- `selector` (required): CSS selector for the element to middle-click
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Middle-click to open link in new tab
web_middle_click_cremotemcp:
  selector: "a[href='/dashboard']"
  timeout: 10

# Middle-click on navigation link
web_middle_click_cremotemcp:
  selector: ".nav-link"
  tab: "tab-123"
```

### 41. `web_mouse_move_cremotemcp` *(New in Phase 7)*
Move mouse to specific coordinates without clicking.

**Parameters:**
- `x` (required): X coordinate to move mouse to
- `y` (required): Y coordinate to move mouse to
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Move mouse to specific position
web_mouse_move_cremotemcp:
  x: 400
  y: 300
  timeout: 5

# Position mouse for subsequent action
web_mouse_move_cremotemcp:
  x: 150
  y: 200
  tab: "tab-123"
```

### 42. `web_scroll_wheel_cremotemcp` *(New in Phase 7)*
Scroll with mouse wheel at specific coordinates.

**Parameters:**
- `x` (required): X coordinate for scroll wheel
- `y` (required): Y coordinate for scroll wheel
- `delta_y` (required): Vertical scroll delta (negative = up, positive = down)
- `delta_x` (optional): Horizontal scroll delta (negative = left, positive = right, default: 0)
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Scroll up at specific location
web_scroll_wheel_cremotemcp:
  x: 400
  y: 300
  delta_y: -120
  timeout: 5

# Scroll down with horizontal component
web_scroll_wheel_cremotemcp:
  x: 500
  y: 400
  delta_x: 50
  delta_y: 120
  tab: "tab-123"
```

### 43. `web_key_combination_cremotemcp` *(New in Phase 7)*
Send key combinations like Ctrl+C, Alt+Tab, Shift+Enter.

**Parameters:**
- `keys` (required): Key combination to send (e.g., 'Ctrl+C', 'Alt+Tab', 'Shift+Enter', 'Ctrl+Shift+T')
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Copy selected text
web_key_combination_cremotemcp:
  keys: "Ctrl+C"
  timeout: 5

# Open new tab
web_key_combination_cremotemcp:
  keys: "Ctrl+T"
  tab: "tab-123"

# Select all text
web_key_combination_cremotemcp:
  keys: "Ctrl+A"
```

### 44. `web_special_key_cremotemcp` *(New in Phase 7)*
Send special keys like Enter, Escape, Tab, F1-F12, Arrow keys.

**Parameters:**
- `key` (required): Special key to send (e.g., 'Enter', 'Escape', 'Tab', 'F1', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Delete', 'Backspace')
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Press Enter key
web_special_key_cremotemcp:
  key: "Enter"
  timeout: 5

# Navigate with arrow keys
web_special_key_cremotemcp:
  key: "ArrowDown"
  tab: "tab-123"

# Press Escape to close dialog
web_special_key_cremotemcp:
  key: "Escape"
```

### 45. `web_modifier_click_cremotemcp` *(New in Phase 7)*
Click on an element with modifier keys (Ctrl+click, Shift+click).

**Parameters:**
- `selector` (required): CSS selector for the element to click
- `modifiers` (required): Modifier keys to hold while clicking (e.g., 'Ctrl', 'Shift', 'Alt', 'Ctrl+Shift', 'Ctrl+Alt')
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)

**Example Usage:**
```
# Ctrl+click for multi-selection
web_modifier_click_cremotemcp:
  selector: ".selectable-item"
  modifiers: "Ctrl"
  timeout: 10

# Shift+click for range selection
web_modifier_click_cremotemcp:
  selector: ".list-item:nth-child(5)"
  modifiers: "Shift"
  tab: "tab-123"

# Ctrl+Shift+click for extended selection
web_modifier_click_cremotemcp:
  selector: ".table-row"
  modifiers: "Ctrl+Shift"
```

## Common Usage Patterns

### 1. Basic Web Navigation
```
# Navigate to a website
web_navigate_cremotemcp:
  url: "https://example.com"
  screenshot: true
```

### 2. Form Interaction Sequence
```
# 1. Navigate to the page
web_navigate_cremotemcp:
  url: "https://example.com/login"

# 2. Fill username field
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='username']"
  value: "myusername"

# 3. Fill password field
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='password']"
  value: "mypassword"

# 4. Submit the form
web_interact_cremotemcp:
  action: "submit"
  selector: "form"
```

### 3. Clicking Elements
```
# Click a button
web_interact_cremotemcp:
  action: "click"
  selector: "button#submit-btn"

# Click a link
web_interact_cremotemcp:
  action: "click"
  selector: "a[href='/dashboard']"
```

### 4. Smart Form Handling *(Phase 3 Pattern)*
```
# 1. Analyze the form first
web_form_analyze_cremotemcp:
  selector: "#registration-form"

# 2. Fill the form efficiently
web_form_fill_bulk_cremotemcp:
  form_selector: "#registration-form"
  fields:
    username: "newuser123"
    email: "user@example.com"
    password: "securepass"
    confirm_password: "securepass"

# 3. Submit the form
web_interact_cremotemcp:
  action: "click"
  selector: "button[type='submit']"
```

### 5. Batch Operations *(Phase 3 Pattern)*
```
# Complete multiple actions efficiently
web_interact_multiple_cremotemcp:
  interactions:
    - selector: "#agree-terms"
      action: "check"
    - selector: "#newsletter"
      action: "uncheck"
    - selector: "#country"
      action: "select"
      value: "United States"
    - selector: "#submit-btn"
      action: "click"
```

### 6. Complex Form Workflows *(Phase 3 Pattern)*
```
# 1. Navigate to registration page
web_navigate_cremotemcp:
  url: "https://example.com/register"

# 2. Analyze the form structure
web_form_analyze_cremotemcp:
  selector: "form"

# 3. Fill all fields at once
web_form_fill_bulk_cremotemcp:
  fields:
    first_name: "John"
    last_name: "Doe"
    email: "john.doe@example.com"
    phone: "555-123-4567"
    company: "Acme Corp"

# 4. Handle checkboxes and selections
web_interact_multiple_cremotemcp:
  interactions:
    - selector: "#terms-agreement"
      action: "check"
    - selector: "#marketing-emails"
      action: "uncheck"
    - selector: "#account-type"
      action: "select"
      value: "business"

# 5. Submit and verify
web_interact_cremotemcp:
  action: "click"
  selector: "button[type='submit']"
```

### 7. Page State Monitoring *(Phase 4 Pattern)*
```
# 1. Navigate to a page
web_navigate_cremotemcp:
  url: "https://example.com/dashboard"

# 2. Get comprehensive page information
web_page_info_cremotemcp:
  timeout: 5

# 3. Check viewport and scroll position
web_viewport_info_cremotemcp:
  timeout: 5

# 4. Verify content is loaded
web_content_check_cremotemcp:
  type: "images"

# 5. Check for any errors
web_content_check_cremotemcp:
  type: "errors"

# 6. Get performance metrics
web_performance_metrics_cremotemcp:
  timeout: 5
```

## Best Practices for LLMs

### 1. Always Start with Navigation
Before interacting with elements, navigate to the target page:
```
web_navigate_cremotemcp:
  url: "https://target-website.com"
```

### 2. Use Specific CSS Selectors
Be as specific as possible with selectors to avoid ambiguity:
- Good: `input[name='email']`, `button.primary-submit`
- Avoid: `input`, `button`

### 3. Take Screenshots for Debugging
When troubleshooting or documenting, use screenshots:
```
web_navigate_cremotemcp:
  url: "https://example.com"
  screenshot: true
```

### 4. Handle Timeouts Appropriately
For slow-loading pages, increase timeout:
```
web_navigate_cremotemcp:
  url: "https://slow-website.com"
  timeout: 10
```

### 5. Sequential Operations
Perform operations in logical sequence:
1. Navigate to page
2. Fill required fields
3. Submit forms
4. Navigate to next page if needed

## Error Handling

### Common Error Scenarios:
1. **Element not found**: Selector doesn't match any elements
2. **Timeout**: Page takes too long to load or element to appear
3. **Navigation failed**: URL is invalid or unreachable

### Troubleshooting Tips:
1. Verify the URL is correct and accessible
2. Check CSS selectors using browser developer tools
3. Increase timeout for slow-loading content
4. Take screenshots to see current page state

## Tab Management

The tools automatically manage browser tabs:
- If no tab is specified, a new tab is created automatically
- Tab IDs are returned in responses for reference
- Multiple tabs can be managed by specifying tab IDs

## Security Considerations

### Safe Practices:
- Only navigate to trusted websites
- Be cautious with form submissions
- Avoid entering sensitive information in examples
- Use screenshots sparingly to avoid exposing sensitive data

### Limitations:
- Cannot bypass CAPTCHA or other anti-automation measures
- Subject to same-origin policy restrictions
- May not work with heavily JavaScript-dependent sites

## Example: Complete Web Automation Task

Here's a complete example of automating a web form:

```
# Step 1: Navigate to the form page
web_navigate_cremotemcp:
  url: "https://example.com/contact"
  screenshot: true

# Step 2: Fill out the contact form
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='name']"
  value: "John Doe"

web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='email']"
  value: "john@example.com"

web_interact_cremotemcp:
  action: "fill"
  selector: "textarea[name='message']"
  value: "Hello, this is a test message."

# Step 3: Submit the form
web_interact_cremotemcp:
  action: "submit"
  selector: "form#contact-form"

# Step 4: Take a screenshot of the result
web_navigate_cremotemcp:
  url: "current"  # Stay on current page
  screenshot: true
```

## Example: File Upload Workflow

Here's how to upload a file and use it in a web form:

### Simplified Workflow (Recommended - Automatic Transfer)

```
# Step 1: Navigate to upload form
web_navigate_cremotemcp:
  url: "https://jobsite.com/apply"

# Step 2: Fill out application form
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='name']"
  value: "Jane Smith"

# Step 3: Upload the file directly from host - automatic transfer!
web_interact_cremotemcp:
  action: "upload"
  selector: "input[type='file']"
  value: "/home/user/resume.pdf"  # Local host path - will be auto-transferred

# Step 4: Submit the application
web_interact_cremotemcp:
  action: "submit"
  selector: "form.application"
```

### Legacy Workflow (Manual Transfer - Still Supported)

```
# Step 1: Upload a file from client to container
file_upload_cremotemcp:
  local_path: "/home/user/resume.pdf"
  container_path: "/tmp/resume.pdf"

# Step 2: Navigate to upload form
web_navigate_cremotemcp:
  url: "https://jobsite.com/apply"

# Step 3: Fill out application form
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='name']"
  value: "Jane Smith"

# Step 4: Upload the file using the container path
web_interact_cremotemcp:
  action: "upload"
  selector: "input[type='file']"
  value: "/tmp/resume.pdf"

# Step 5: Submit the application
web_interact_cremotemcp:
  action: "submit"
  selector: "form.application"
```

## Example: Download Files from Browser

Here's how to download files that the browser saves:

```
# Step 1: Navigate to download page
web_navigate_cremotemcp:
  url: "https://example.com/reports"

# Step 2: Click download link
web_interact_cremotemcp:
  action: "click"
  selector: "a.download-report"

# Step 3: Wait a moment for download to complete
# (In practice, you might need to check for file existence)

# Step 4: Download the file from container to client
file_download_cremotemcp:
  container_path: "/tmp/downloads/report.pdf"
  local_path: "/home/user/Downloads/report.pdf"
```

## Example: Console Debugging Workflow

Here's how to use console tools for debugging web automation:

```
# Step 1: Navigate to a page
web_navigate_cremotemcp:
  url: "https://example.com/form"

# Step 2: Check what's in the console initially
console_logs_cremotemcp:
  clear: false

# Step 3: Execute some debugging commands
console_command_cremotemcp:
  command: "console.log('Starting form automation')"

console_command_cremotemcp:
  command: "document.querySelectorAll('input').length"

# Step 4: Try to interact with form
web_interact_cremotemcp:
  action: "fill"
  selector: "input[name='email']"
  value: "test@example.com"

# Step 5: Check for any console errors after interaction
console_logs_cremotemcp:
  clear: false

# Step 6: Debug element selection
console_command_cremotemcp:
  command: "document.querySelector('input[name=\"email\"]') ? 'Found' : 'Not found'"

# Step 7: Check element properties
console_command_cremotemcp:
  command: "document.querySelector('input[name=\"email\"]').value"
```

## Example: Phase 2 Enhanced Data Extraction

Here's how to use the new Phase 2 tools for efficient data extraction:

```
# Step 1: Navigate to a product page
web_navigate_cremotemcp:
  url: "https://ecommerce.com/product/123"

# Step 2: Extract multiple data points in one call
web_extract_multiple_cremotemcp:
  selectors:
    title: "h1.product-title"
    price: ".price-current"
    description: ".product-description"
    rating: ".rating-score"
    availability: ".stock-status"

# Step 3: Extract all product images and links
web_extract_links_cremotemcp:
  container_selector: ".product-gallery"
  href_pattern: ".*\\.(jpg|png|gif).*"

# Step 4: Extract reviews table if present
web_extract_table_cremotemcp:
  selector: "#reviews-table"
  include_headers: true

# Step 5: Extract specific text patterns (like model numbers)
web_extract_text_cremotemcp:
  selector: ".product-specs"
  pattern: "Model: ([A-Z0-9-]+)"
```

## Example: Comprehensive Site Analysis

Here's how to analyze a website's structure using Phase 2 tools:

```
# Step 1: Navigate to the homepage
web_navigate_cremotemcp:
  url: "https://example.com"

# Step 2: Extract all navigation links
web_extract_links_cremotemcp:
  container_selector: "nav"

# Step 3: Extract social media links
web_extract_links_cremotemcp:
  href_pattern: ".*(facebook|twitter|linkedin|instagram).*"

# Step 4: Extract contact information
web_extract_text_cremotemcp:
  selector: ".contact-info"
  pattern: "\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b"

# Step 5: Extract phone numbers
web_extract_text_cremotemcp:
  selector: "body"
  pattern: "\\(?\\d{3}\\)?[-. ]?\\d{3}[-. ]?\\d{4}"

# Step 6: Extract key page elements in one call
web_extract_multiple_cremotemcp:
  selectors:
    title: "title"
    heading: "h1"
    meta_description: "meta[name='description']"
    footer_text: "footer"
```

### Phase 6: Accessibility Tree Support (3 Tools)

#### `get_accessibility_tree_cremotemcp`
Get the full accessibility tree for a page or with limited depth for semantic understanding.

**Parameters:**
- `tab` (optional): Tab ID, uses current tab if not specified
- `depth` (optional): Maximum depth to retrieve, omit for full tree
- `timeout` (optional): Timeout in seconds, default 5

**Use Cases:**
- Accessibility testing and compliance verification
- Understanding page structure for screen readers
- Semantic element discovery and analysis

**Example:**
```
get_accessibility_tree_cremotemcp:
  depth: 3
  timeout: 10
```

#### `get_partial_accessibility_tree_cremotemcp`
Get accessibility tree for a specific element and its relatives (ancestors, siblings, children).

**Parameters:**
- `selector`: CSS selector for the target element (required)
- `tab` (optional): Tab ID, uses current tab if not specified
- `fetch_relatives` (optional): Include relatives, default true
- `timeout` (optional): Timeout in seconds, default 5

**Use Cases:**
- Focused accessibility analysis of specific components
- Form accessibility structure analysis
- Widget accessibility verification

**Example:**
```
get_partial_accessibility_tree_cremotemcp:
  selector: "form.login-form"
  fetch_relatives: true
  timeout: 10
```

#### `query_accessibility_tree_cremotemcp`
Query accessibility tree for nodes matching specific criteria (accessible name, role, or scope).

**Parameters:**
- `tab` (optional): Tab ID, uses current tab if not specified
- `selector` (optional): CSS selector to limit search scope
- `accessible_name` (optional): Accessible name to match
- `role` (optional): ARIA role to match (e.g., "button", "textbox", "link")
- `timeout` (optional): Timeout in seconds, default 5

**Use Cases:**
- Find elements by their accessible names (what screen readers announce)
- Locate elements by ARIA roles for semantic interaction
- Accessibility-aware element discovery and testing

**Examples:**
```
# Find all buttons on the page
query_accessibility_tree_cremotemcp:
  role: "button"

# Find submit button by accessible name
query_accessibility_tree_cremotemcp:
  accessible_name: "Submit"
  role: "button"

# Find form controls within a specific form
query_accessibility_tree_cremotemcp:
  selector: "form.checkout"
  role: "textbox"
```

## Integration Notes

- Tools use the `_cremotemcp` suffix to avoid naming conflicts
- Responses include success status and descriptive messages
- Screenshots are saved to `/tmp/` directory with timestamps
- The underlying cremote daemon handles browser management
- Accessibility tree tools provide semantic understanding of page structure

## Advanced Usage Examples

### Testing Web Applications
```
# Navigate to application
web_navigate_cremotemcp:
  url: "https://myapp.com/login"
  screenshot: true

# Test login functionality
web_interact_cremotemcp:
  action: "fill"
  selector: "#username"
  value: "testuser"

web_interact_cremotemcp:
  action: "fill"
  selector: "#password"
  value: "testpass"

web_interact_cremotemcp:
  action: "click"
  selector: "button[type='submit']"

# Verify successful login
web_navigate_cremotemcp:
  url: "current"
  screenshot: true
```

### Data Extraction Workflows
```
# Navigate to data source
web_navigate_cremotemcp:
  url: "https://data-site.com/table"

# Click through pagination or filters
web_interact_cremotemcp:
  action: "click"
  selector: ".filter-button"

# Take screenshot to document current state
web_navigate_cremotemcp:
  url: "current"
  screenshot: true
```

### File Upload Testing
```
# Navigate to upload form
web_navigate_cremotemcp:
  url: "https://example.com/upload"

# Upload a file
web_interact_cremotemcp:
  action: "upload"
  selector: "input[type='file']"
  value: "/path/to/test-file.pdf"

# Submit the upload form
web_interact_cremotemcp:
  action: "click"
  selector: "button.upload-submit"
```

## Tool Response Format

Both tools return structured responses:

**Success Response:**
```
"Successfully navigated to https://example.com in tab ABC123 (screenshot saved to /tmp/navigate-1234567890.png)"
```

**Error Response:**
```
"failed to load URL: context deadline exceeded"
```

## CSS Selector Best Practices

### Recommended Selector Types:
1. **ID selectors**: `#unique-id` (most reliable)
2. **Name attributes**: `input[name='fieldname']`
3. **Class combinations**: `.primary.button`
4. **Attribute selectors**: `button[data-action='submit']`

### Avoid These Selectors:
1. **Generic tags**: `div`, `span`, `input` (too broad)
2. **Position-based**: `:nth-child()` (fragile)
3. **Text-based**: `:contains()` (not standard CSS)

## 🚀 Advanced Workflow Examples

### Efficient Form Completion Workflow
```yaml
# 1. Check if form exists
web_element_check_cremotemcp:
  selector: "#registration-form"
  check_type: "exists"

# 2. Analyze form structure
web_form_analyze_cremotemcp:
  selector: "#registration-form"

# 3. Fill entire form in one call
web_form_fill_bulk_cremotemcp:
  form_selector: "#registration-form"
  fields:
    name: "John Doe"
    email: "john@example.com"
    password: "securepass123"
    confirm_password: "securepass123"
```

### Comprehensive Data Extraction Workflow
```yaml
# 1. Get page performance metrics
web_performance_metrics_cremotemcp: {}

# 2. Extract multiple data points at once
web_extract_multiple_cremotemcp:
  selectors:
    title: "h1"
    price: ".price"
    description: ".product-description"
    availability: ".stock-status"

# 3. Extract all product links
web_extract_links_cremotemcp:
  container_selector: ".product-grid"
  href_pattern: ".*/product/.*"

# 4. Take enhanced screenshot with metadata
web_screenshot_enhanced_cremotemcp:
  output: "/tmp/product-page.png"
  full_page: true
```

### Accessibility Testing and Semantic Automation
```
# Navigate to page for accessibility testing
web_navigate_cremotemcp:
  url: "https://myapp.com/form"
  screenshot: true

# Get full accessibility tree to analyze structure
get_accessibility_tree_cremotemcp:
  depth: 3
  timeout: 10

# Find form elements by accessible names (more robust than CSS selectors)
query_accessibility_tree_cremotemcp:
  accessible_name: "Email Address"
  role: "textbox"

# Fill form using accessibility-aware approach
web_interact_cremotemcp:
  action: "fill"
  selector: "[aria-label='Email Address']"
  value: "user@example.com"

# Find and click submit button by accessible name
query_accessibility_tree_cremotemcp:
  accessible_name: "Submit Form"
  role: "button"

# Verify form accessibility structure
get_partial_accessibility_tree_cremotemcp:
  selector: "form"
  fetch_relatives: true
```

## 🎯 Best Practices for LLM Agents

### 1. **Use Batch Operations**
- Prefer `web_extract_multiple_cremotemcp` over multiple `web_extract_cremotemcp` calls
- Use `web_form_fill_bulk_cremotemcp` instead of individual field interactions
- Leverage `web_interact_multiple_cremotemcp` for complex interaction sequences

### 2. **Check Before Acting**
- Always use `web_element_check_cremotemcp` before interacting with elements
- Verify page state with `web_page_info_cremotemcp` when needed
- Check content loading with `web_content_check_cremotemcp`

### 3. **Optimize for Efficiency**
- **10x Form Efficiency**: Complete forms in 1-2 calls instead of 10+
- **Batch Data Extraction**: Extract multiple data points in single calls
- **Smart Element Checking**: Prevent errors with conditional logic

### 4. **Enhanced Debugging**
- Use `web_screenshot_element_cremotemcp` for targeted debugging
- Leverage `console_logs_cremotemcp` for JavaScript error detection
- Take `web_screenshot_enhanced_cremotemcp` with metadata for comprehensive documentation

### 5. **Accessibility-Aware Automation**
- Use `query_accessibility_tree_cremotemcp` to find elements by accessible names instead of fragile selectors
- Verify accessibility compliance with `get_accessibility_tree_cremotemcp`
- Test screen reader compatibility by analyzing semantic structure
- Build more robust automation using ARIA roles and accessible names

### Advanced Input Operation Testing *(Phase 7 Patterns)*
```
# Test context menu workflows
web_right_click_cremotemcp:
  selector: ".file-item"
  timeout: 5
web_interact_cremotemcp:
  action: "click"
  selector: ".context-menu .delete"
  timeout: 5

# Test hover-triggered dropdowns
web_hover_cremotemcp:
  selector: ".nav-item"
  timeout: 5
web_interact_cremotemcp:
  action: "click"
  selector: ".dropdown-item"
  timeout: 5

# Test keyboard navigation accessibility
web_special_key_cremotemcp:
  key: "Tab"
  timeout: 5
web_special_key_cremotemcp:
  key: "Enter"
  timeout: 5

# Test copy/paste workflows
web_key_combination_cremotemcp:
  keys: "Ctrl+A"
  timeout: 5
web_key_combination_cremotemcp:
  keys: "Ctrl+C"
  timeout: 5
web_interact_cremotemcp:
  action: "click"
  selector: "#target-input"
  timeout: 5
web_key_combination_cremotemcp:
  keys: "Ctrl+V"
  timeout: 5

# Test multi-selection with modifier clicks
web_modifier_click_cremotemcp:
  selector: ".item:nth-child(1)"
  modifiers: "Ctrl"
  timeout: 5
web_modifier_click_cremotemcp:
  selector: ".item:nth-child(3)"
  modifiers: "Ctrl"
  timeout: 5
web_modifier_click_cremotemcp:
  selector: ".item:nth-child(5)"
  modifiers: "Ctrl"
  timeout: 5

# Test precise mouse wheel scrolling
web_scroll_wheel_cremotemcp:
  x: 400
  y: 300
  delta_y: -240  # Scroll up 2 notches
  timeout: 5

# Test middle-click for new tabs
web_middle_click_cremotemcp:
  selector: "a[href='/dashboard']"
  timeout: 5

# Test double-click for text selection
web_double_click_cremotemcp:
  selector: ".editable-text"
  timeout: 5
```

### Advanced Drag & Drop Testing *(Phase 6 Patterns)*
```
# Test sortable list reordering
web_drag_and_drop_cremotemcp:
  source: ".list-item:first-child"
  target: ".list-item:last-child"
  timeout: 10

# Test file upload via drag and drop
web_drag_and_drop_coordinates_cremotemcp:
  source: ".file-item"
  x: 400
  y: 300  # Drop zone coordinates
  timeout: 15

# Test dashboard widget repositioning
web_drag_and_drop_offset_cremotemcp:
  source: ".widget"
  offset_x: 200
  offset_y: 100
  timeout: 10
```

## 🎉 Production Ready

This comprehensive web automation platform provides **45 tools** across 7 enhancement phases, optimized specifically for LLM agents and production workflows. All tools include proper error handling, timeout management, and structured responses for reliable automation.

**Latest Enhancement - Phase 7**: Advanced input operations including right-click context menus, hover interactions, keyboard combinations, modifier clicks, precise mouse control, and mouse wheel scrolling for comprehensive testing of modern interactive web applications.

---

**Ready for Production**: Complete web automation platform with 45 tools, designed for maximum efficiency and reliability in LLM-driven workflows.
