cremote/mcp/WORKFLOW_EXAMPLES.md

# Cremote MCP Tools - Comprehensive Workflow Examples

This document provides practical workflow examples demonstrating how to use the enhanced cremote MCP tools for common automation tasks.

## 🎯 Form Automation Workflows

### 1. Efficient Registration Form Completion

**Traditional Approach (10+ API calls):**
```yaml
# Multiple individual interactions
web_interact_cremotemcp:
  action: "fill"
  selector: "#firstName"
  value: "John"

web_interact_cremotemcp:
  action: "fill"
  selector: "#lastName"
  value: "Doe"

# ... 8 more individual calls
```

**Enhanced Approach (2-3 API calls):**
```yaml
# 1. Check if form exists and analyze structure
web_form_analyze_cremotemcp:
  selector: "#registration-form"

# 2. Fill entire form in one call (10x efficiency)
web_form_fill_bulk_cremotemcp:
  form_selector: "#registration-form"
  fields:
    firstName: "John"
    lastName: "Doe"
    email: "john.doe@example.com"
    password: "SecurePass123"
    confirmPassword: "SecurePass123"
    phone: "+1-555-0123"
    country: "United States"
    agreeToTerms: true

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

### 2. Multi-Step Form with Validation

```yaml
# 1. Navigate and check page state
web_navigate_cremotemcp:
  url: "https://example.com/multi-step-form"
  screenshot: true

# 2. Check if first step is loaded
web_element_check_cremotemcp:
  selector: "#step-1"
  check_type: "visible"

# 3. Fill first step
web_form_fill_bulk_cremotemcp:
  form_selector: "#step-1"
  fields:
    personalInfo: "John Doe"
    birthDate: "1990-01-01"

# 4. Check if next button is enabled
web_element_check_cremotemcp:
  selector: "#next-step-1"
  check_type: "enabled"

# 5. Proceed to next step
web_interact_cremotemcp:
  action: "click"
  selector: "#next-step-1"

# 6. Wait for step 2 and continue
web_element_check_cremotemcp:
  selector: "#step-2"
  check_type: "visible"
```

## 📊 Data Extraction Workflows

### 3. E-commerce Product Analysis

```yaml
# 1. Navigate to product listing
web_navigate_cremotemcp:
  url: "https://shop.example.com/products"
  screenshot: true

# 2. Get page performance metrics
web_performance_metrics_cremotemcp: {}

# 3. Extract all product data in one call
web_extract_multiple_cremotemcp:
  selectors:
    product_titles: ".product-card h3"
    prices: ".product-card .price"
    ratings: ".product-card .rating"
    availability: ".product-card .stock-status"
    images: ".product-card img"

# 4. Extract all product links with filtering
web_extract_links_cremotemcp:
  container_selector: ".product-grid"
  href_pattern: ".*/product/.*"
  text_pattern: ".*"

# 5. Extract pricing table if available
web_extract_table_cremotemcp:
  selector: "#pricing-comparison"
  include_headers: true

# 6. Check if more products are loading (infinite scroll)
web_content_check_cremotemcp:
  type: "scripts"

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

### 4. Contact Information Extraction

```yaml
# 1. Navigate to contact page
web_navigate_cremotemcp:
  url: "https://company.example.com/contact"

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

# 3. Extract phone numbers
web_extract_text_cremotemcp:
  selector: ".contact-info"
  pattern: "\\+?1?-?\\(?\\d{3}\\)?-?\\d{3}-?\\d{4}"
  extract_type: "textContent"

# 4. Extract all contact-related links
web_extract_links_cremotemcp:
  container_selector: ".contact-section"
  href_pattern: "(mailto:|tel:).*"

# 5. Extract office locations from table
web_extract_table_cremotemcp:
  selector: "#office-locations"
  include_headers: true
```

## 🔍 Page Analysis Workflows

### 5. Comprehensive Site Health Check

```yaml
# 1. Navigate and get initial state
web_navigate_cremotemcp:
  url: "https://example.com"
  screenshot: true

# 2. Get comprehensive page information
web_page_info_cremotemcp: {}

# 3. Get viewport and scroll information
web_viewport_info_cremotemcp: {}

# 4. Get performance metrics
web_performance_metrics_cremotemcp: {}

# 5. Check if all images are loaded
web_content_check_cremotemcp:
  type: "images"

# 6. Check if all scripts are loaded
web_content_check_cremotemcp:
  type: "scripts"

# 7. Check for JavaScript errors
console_logs_cremotemcp:
  clear: false

# 8. Take element-specific screenshots of key areas
web_screenshot_element_cremotemcp:
  selector: "header"
  output: "/tmp/header-screenshot.png"

web_screenshot_element_cremotemcp:
  selector: "main"
  output: "/tmp/main-content-screenshot.png"

# 9. Take enhanced full-page screenshot
web_screenshot_enhanced_cremotemcp:
  output: "/tmp/full-page-analysis.png"
  full_page: true
```

### 6. Form Validation Testing

```yaml
# 1. Navigate to form page
web_navigate_cremotemcp:
  url: "https://example.com/contact-form"

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

# 3. Test empty form submission
web_interact_cremotemcp:
  action: "click"
  selector: "button[type='submit']"

# 4. Check for validation errors
web_element_check_cremotemcp:
  selector: ".error-message"
  check_type: "visible"

# 5. Get error message attributes
web_element_attributes_cremotemcp:
  selector: ".error-message"
  attributes: "textContent,class,style_display"

# 6. Fill form with invalid data
web_form_fill_bulk_cremotemcp:
  form_selector: "#contact-form"
  fields:
    email: "invalid-email"
    phone: "123"

# 7. Submit and check validation
web_interact_cremotemcp:
  action: "click"
  selector: "button[type='submit']"

# 8. Screenshot validation state
web_screenshot_element_cremotemcp:
  selector: "#contact-form"
  output: "/tmp/form-validation-errors.png"
```

## 📁 File Management Workflows

### 7. Bulk File Operations

```yaml
# 1. Upload multiple files for form submission
file_operations_bulk_cremotemcp:
  operation: "upload"
  files:
    - local_path: "/local/documents/resume.pdf"
      container_path: "/tmp/resume.pdf"
    - local_path: "/local/documents/cover-letter.pdf"
      container_path: "/tmp/cover-letter.pdf"
    - local_path: "/local/images/profile.jpg"
      container_path: "/tmp/profile.jpg"

# 2. Fill file upload form
web_form_fill_bulk_cremotemcp:
  form_selector: "#application-form"
  fields:
    resume: "/tmp/resume.pdf"
    coverLetter: "/tmp/cover-letter.pdf"
    photo: "/tmp/profile.jpg"

# 3. Submit application
web_interact_cremotemcp:
  action: "click"
  selector: "#submit-application"

# 4. Download confirmation documents
file_operations_bulk_cremotemcp:
  operation: "download"
  files:
    - container_path: "/tmp/application-confirmation.pdf"
      local_path: "/local/downloads/confirmation.pdf"
    - container_path: "/tmp/receipt.pdf"
      local_path: "/local/downloads/receipt.pdf"

# 5. Clean up temporary files
file_management_cremotemcp:
  operation: "cleanup"
  pattern: "/tmp/application-*"
  max_age: "1"
```

## 🎯 Advanced Automation Patterns

### 8. Conditional Workflow with Error Handling

```yaml
# 1. Navigate with error checking
web_navigate_cremotemcp:
  url: "https://example.com/dynamic-form"
  screenshot: true

# 2. Check if login is required
web_element_check_cremotemcp:
  selector: "#login-form"
  check_type: "exists"

# 3. Conditional login (if login form exists)
# This would be handled by LLM logic based on the check result
web_form_fill_bulk_cremotemcp:
  form_selector: "#login-form"
  fields:
    username: "testuser"
    password: "testpass"

# 4. Wait for page to load after login
web_element_check_cremotemcp:
  selector: "#main-content"
  check_type: "visible"

# 5. Check if target form is now available
web_element_check_cremotemcp:
  selector: "#target-form"
  check_type: "all"

# 6. Proceed with main workflow if form is ready
web_form_analyze_cremotemcp:
  selector: "#target-form"
```

### 9. Performance-Optimized Data Collection

```yaml
# 1. Navigate and immediately start performance monitoring
web_navigate_cremotemcp:
  url: "https://data-heavy-site.com"

# 2. Get initial performance baseline
web_performance_metrics_cremotemcp: {}

# 3. Extract all data in parallel (single call)
web_extract_multiple_cremotemcp:
  selectors:
    headlines: "h1, h2, h3"
    content: ".article-content"
    metadata: ".article-meta"
    tags: ".tag"
    authors: ".author"
    dates: ".publish-date"
    comments: ".comment-count"
    shares: ".share-count"

# 4. Extract all navigation and content links
web_extract_links_cremotemcp:
  container_selector: "main"
  href_pattern: ".*"

# 5. Check final performance impact
web_performance_metrics_cremotemcp: {}

# 6. Take comprehensive documentation screenshot
web_screenshot_enhanced_cremotemcp:
  output: "/tmp/data-collection-complete.png"
  full_page: true
```

## 🚀 Best Practices Summary

### Efficiency Guidelines
1. **Use Batch Operations**: Prefer bulk tools over individual operations
2. **Check Before Acting**: Always verify element state before interaction
3. **Monitor Performance**: Use performance metrics for optimization
4. **Document with Screenshots**: Use enhanced screenshots for debugging

### Error Prevention
1. **Element Checking**: Use `web_element_check_cremotemcp` before interactions
2. **Form Analysis**: Use `web_form_analyze_cremotemcp` before filling forms
3. **Content Verification**: Use `web_content_check_cremotemcp` for loading states
4. **Console Monitoring**: Check `console_logs_cremotemcp` for JavaScript errors

### Performance Optimization
1. **Batch Data Extraction**: Use `web_extract_multiple_cremotemcp` for multiple selectors
2. **Bulk Form Filling**: Use `web_form_fill_bulk_cremotemcp` for complete forms
3. **Efficient File Operations**: Use `file_operations_bulk_cremotemcp` for multiple files
4. **Smart Screenshots**: Use `web_screenshot_element_cremotemcp` for targeted debugging

---

**🎉 Production Ready**: These workflows demonstrate the 10x efficiency gains possible with the enhanced cremote MCP tools, optimized for LLM agents and production automation tasks.