MCP Drag and Drop Test Examples

This document provides examples of how to use the enhanced drag and drop tools through the MCP interface.

Overview

Cremote now supports three types of drag and drop operations with enhanced HTML5 support:

Element to Element: Drag from one element to another element (with HTML5 event support)
Element to Coordinates: Drag from an element to specific x,y coordinates (with smart target detection)
Element by Offset: Drag from an element by a relative pixel offset (with smart target detection)

Enhanced Features (Phase 6 Improvements)

HTML5 Event Support: All drag operations now properly trigger HTML5 drag and drop events (dragstart, dragover, drop, dragend)
Smart Target Detection: Coordinate and offset drags automatically detect valid drop targets at destination
Hybrid Approach: Functions try HTML5 approach first, fall back to mouse events if needed
Improved Reliability: Much better compatibility with modern web applications that rely on HTML5 drag and drop

Example 1: Basic Drag and Drop Between Elements

# Navigate to a page with draggable elements
web_navigate_cremotemcp:
  url: "https://www.w3schools.com/html/html5_draganddrop.asp"
  timeout: 10

# Drag an image from one div to another
web_drag_and_drop_cremotemcp:
  source: "#drag1"
  target: "#div2"
  timeout: 10

# Take a screenshot to verify the result
web_screenshot_cremotemcp:
  output: "/tmp/drag-drop-result.png"

Example 2: Sortable List Testing

# Navigate to a sortable list demo
web_navigate_cremotemcp:
  url: "https://jqueryui.com/sortable/"

# Switch to the demo iframe
web_iframe_cremotemcp:
  action: "enter"
  selector: ".demo-frame"

# Drag the first item to the third position
web_drag_and_drop_cremotemcp:
  source: "#sortable li:first-child"
  target: "#sortable li:nth-child(3)"
  timeout: 10

# Switch back to main frame
web_iframe_cremotemcp:
  action: "exit"

# Take a screenshot
web_screenshot_cremotemcp:
  output: "/tmp/sortable-test.png"

Example 3: Kanban Board Testing

# Navigate to a kanban board application
web_navigate_cremotemcp:
  url: "https://example.com/kanban-board"

# Drag a card from "To Do" to "In Progress"
web_drag_and_drop_cremotemcp:
  source: ".todo-column .card:first-child"
  target: ".in-progress-column"
  timeout: 15

# Verify the card moved by checking the target column
web_element_check_cremotemcp:
  selector: ".in-progress-column .card"
  check_type: "exists"

# Take a screenshot of the updated board
web_screenshot_cremotemcp:
  output: "/tmp/kanban-board-updated.png"

Example 4: Drag and Drop to Specific Coordinates

# Navigate to a drawing or design application
web_navigate_cremotemcp:
  url: "https://example.com/design-tool"

# Drag an element to a specific position on the canvas
web_drag_and_drop_coordinates_cremotemcp:
  source: ".toolbar .shape-tool"
  x: 400
  y: 300
  timeout: 10

# Drag another element to a different position
web_drag_and_drop_coordinates_cremotemcp:
  source: ".toolbar .text-tool"
  x: 200
  y: 150
  timeout: 10

# Take a screenshot of the canvas
web_screenshot_cremotemcp:
  output: "/tmp/design-canvas.png"

Example 5: File Upload via Drag and Drop

# Navigate to a file upload page
web_navigate_cremotemcp:
  url: "https://example.com/file-upload"

# First, upload a file to the container (if needed)
file_upload_cremotemcp:
  local_path: "/home/user/test-file.pdf"
  container_path: "/tmp/test-file.pdf"

# Simulate dragging a file to the upload area
# Note: This simulates the drag gesture, actual file upload may require different handling
web_drag_and_drop_cremotemcp:
  source: ".file-selector"
  target: ".upload-drop-zone"
  timeout: 15

# Check if upload was successful
web_element_check_cremotemcp:
  selector: ".upload-success"
  check_type: "visible"

# Navigate to a dashboard
web_navigate_cremotemcp:
  url: "https://example.com/dashboard"

# Drag a widget by relative offset to rearrange layout
web_drag_and_drop_offset_cremotemcp:
  source: "#widget-sales"
  offset_x: 200
  offset_y: 0
  timeout: 10

# Drag another widget to a different position
web_drag_and_drop_offset_cremotemcp:
  source: "#widget-analytics"
  offset_x: -150
  offset_y: 100
  timeout: 10

# Take a screenshot of the rearranged dashboard
web_screenshot_cremotemcp:
  output: "/tmp/dashboard-rearranged.png"

Example 7: Form Builder Testing

# Navigate to a form builder application
web_navigate_cremotemcp:
  url: "https://example.com/form-builder"

# Drag a text input from the toolbox to the form area
web_drag_and_drop_cremotemcp:
  source: ".toolbox .text-input"
  target: ".form-canvas"
  timeout: 10

# Drag a button element to the form
web_drag_and_drop_cremotemcp:
  source: ".toolbox .button-element"
  target: ".form-canvas"
  timeout: 10

# Rearrange elements by dragging the button below the text input
web_drag_and_drop_cremotemcp:
  source: ".form-canvas .button-element"
  target: ".form-canvas .text-input"
  timeout: 10

# Take a screenshot of the built form
web_screenshot_cremotemcp:
  output: "/tmp/form-builder-result.png"

Example 8: Game Testing - Puzzle Game

# Navigate to a puzzle game
web_navigate_cremotemcp:
  url: "https://example.com/puzzle-game"

# Drag puzzle pieces to solve the puzzle
web_drag_and_drop_cremotemcp:
  source: "#piece-1"
  target: "#slot-1"
  timeout: 10

web_drag_and_drop_cremotemcp:
  source: "#piece-2"
  target: "#slot-2"
  timeout: 10

# Check if puzzle is solved
web_element_check_cremotemcp:
  selector: ".puzzle-solved"
  check_type: "visible"

# Take a screenshot of the completed puzzle
web_screenshot_cremotemcp:
  output: "/tmp/puzzle-completed.png"

Integration with Other Tools

Drag and drop works seamlessly with other cremote MCP tools:

Use with web_element_check_cremotemcp to verify drag results
Combine with web_screenshot_cremotemcp for visual verification
Use with web_navigate_cremotemcp to test different drag and drop implementations
Integrate with web_form_analyze_cremotemcp for form builder testing
Use with web_iframe_cremotemcp for testing drag and drop in embedded content

Best Practices

Use appropriate timeouts - Drag and drop operations may take longer than simple clicks
Verify results - Always check that the drag and drop had the expected effect
Take screenshots - Visual verification is important for drag and drop testing
Test different scenarios - Try element-to-element, coordinates, and offset methods
Handle iframes - Switch iframe context when testing embedded drag and drop widgets

Common Use Cases

File Upload Testing: Drag files to upload areas
Sortable List Testing: Reorder items in lists
Kanban Board Testing: Move cards between columns
Dashboard Testing: Rearrange widgets and components
Form Builder Testing: Drag form elements to build layouts
Game Testing: Test drag-based game mechanics
Image Gallery Testing: Rearrange images or media
UI Component Testing: Test custom drag and drop components

7.1 KiB Raw Blame History