252 lines
7.1 KiB
Markdown
252 lines
7.1 KiB
Markdown
# 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:
|
|
|
|
1. **Element to Element**: Drag from one element to another element (with HTML5 event support)
|
|
2. **Element to Coordinates**: Drag from an element to specific x,y coordinates (with smart target detection)
|
|
3. **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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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"
|
|
```
|
|
|
|
## Example 6: Dashboard Widget Rearrangement
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
```yaml
|
|
# 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
|
|
|
|
1. **Use appropriate timeouts** - Drag and drop operations may take longer than simple clicks
|
|
2. **Verify results** - Always check that the drag and drop had the expected effect
|
|
3. **Take screenshots** - Visual verification is important for drag and drop testing
|
|
4. **Test different scenarios** - Try element-to-element, coordinates, and offset methods
|
|
5. **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
|