bump
This commit is contained in:
Josh at WLTechBlog
244
mcp_drag_and_drop_examples.md
Normal file
244
mcp_drag_and_drop_examples.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# MCP Drag and Drop Test Examples
|
||||
|
||||
This document provides examples of how to use the new drag and drop tools through the MCP interface.
|
||||
|
||||
## Overview
|
||||
|
||||
Cremote now supports three types of drag and drop operations:
|
||||
|
||||
1. **Element to Element**: Drag from one element to another element
|
||||
2. **Element to Coordinates**: Drag from an element to specific x,y coordinates
|
||||
3. **Element by Offset**: Drag from an element by a relative pixel offset
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user