This commit is contained in:
Josh at WLTechBlog
2025-09-30 14:11:27 -05:00
parent 86d1db55cd
commit a3c782eb24
11 changed files with 4904 additions and 6 deletions

112
README.md
View File

@@ -95,6 +95,18 @@ cremote <command> [options]
- `clear-all-site-data`: Clear all site data (cookies, storage, cache, etc.)
- `clear-cookies`: Clear cookies for a tab
- `clear-storage`: Clear web storage (localStorage, sessionStorage, etc.)
- `drag-and-drop`: Drag and drop from source element to target element
- `drag-and-drop-coordinates`: Drag and drop from source element to specific coordinates
- `drag-and-drop-offset`: Drag and drop from source element by relative offset
- `right-click`: Right-click on an element to open context menus
- `double-click`: Double-click on an element for file operations or text selection
- `middle-click`: Middle-click on an element (typically opens links in new tabs)
- `hover`: Hover over an element to trigger tooltips or dropdowns
- `mouse-move`: Move mouse to specific coordinates without clicking
- `scroll-wheel`: Scroll with mouse wheel at specific coordinates
- `key-combination`: Send key combinations (Ctrl+C, Alt+Tab, Shift+Enter, etc.)
- `special-key`: Send special keys (Enter, Escape, Tab, F1-F12, Arrow keys, etc.)
- `modifier-click`: Click with modifier keys (Ctrl+click, Shift+click for multi-selection)
- `status`: Check if the daemon is running
### Current Tab Feature
@@ -347,6 +359,106 @@ cremote clear-storage [--tab="<tab-id>"] [--timeout=5]
The `--timeout` parameter specifies how many seconds to wait for the operation to complete (default: 5 seconds, use longer timeouts for comprehensive data clearing).
#### Drag and Drop Operations
You can perform drag and drop operations for testing interactive web applications:
```bash
# Drag and Drop Between Elements
# Drag from source element to target element
cremote drag-and-drop --source=".draggable-item" --target=".drop-zone" [--tab="<tab-id>"] [--timeout=5]
# Drag and Drop to Specific Coordinates
# Drag from source element to specific x,y coordinates
cremote drag-and-drop-coordinates --source=".draggable-item" --x=300 --y=200 [--tab="<tab-id>"] [--timeout=5]
# Drag and Drop by Relative Offset
# Drag from source element by relative pixel offset
cremote drag-and-drop-offset --source=".draggable-item" --offset-x=100 --offset-y=50 [--tab="<tab-id>"] [--timeout=5]
```
**Use Cases:**
- **File Upload**: Drag files to upload areas
- **Sortable Lists**: Reorder items in sortable lists
- **Kanban Boards**: Move cards between columns
- **Image Galleries**: Rearrange images or media
- **Form Builders**: Drag form elements to build layouts
- **Dashboard Widgets**: Rearrange dashboard components
- **Game Testing**: Test drag-based game mechanics
- **UI Component Testing**: Test custom drag and drop components
**Technical Details:**
- Uses Chrome DevTools Protocol for precise mouse event simulation
- Performs realistic drag operations with intermediate mouse movements
- Calculates element center points automatically for accurate targeting
- Supports timeout handling for slow or complex drag operations
- Works with all modern drag and drop APIs (HTML5 Drag and Drop, custom implementations)
The `--timeout` parameter specifies how many seconds to wait for the drag and drop operation to complete (default: 5 seconds).
#### Advanced Input Operations
Cremote provides sophisticated mouse and keyboard interactions for comprehensive testing of modern web applications:
##### Mouse Operations
```bash
# Right-click to open context menus
cremote right-click --selector=".file-item" [--tab="<tab-id>"] [--timeout=5]
# Double-click for file operations or text selection
cremote double-click --selector=".file-icon" [--tab="<tab-id>"] [--timeout=5]
# Middle-click to open links in new tabs
cremote middle-click --selector="a[href='/dashboard']" [--tab="<tab-id>"] [--timeout=5]
# Hover to trigger tooltips or dropdowns
cremote hover --selector=".tooltip-trigger" [--tab="<tab-id>"] [--timeout=5]
# Move mouse to specific coordinates without clicking
cremote mouse-move --x=400 --y=300 [--tab="<tab-id>"] [--timeout=5]
# Scroll with mouse wheel at specific coordinates
cremote scroll-wheel --x=400 --y=300 --delta-y=-120 [--delta-x=0] [--tab="<tab-id>"] [--timeout=5]
```
##### Keyboard Operations
```bash
# Send key combinations (Ctrl+C, Alt+Tab, Shift+Enter, etc.)
cremote key-combination --keys="Ctrl+C" [--tab="<tab-id>"] [--timeout=5]
cremote key-combination --keys="Alt+Tab" [--tab="<tab-id>"] [--timeout=5]
cremote key-combination --keys="Ctrl+Shift+T" [--tab="<tab-id>"] [--timeout=5]
# Send special keys (Enter, Escape, Tab, F1-F12, Arrow keys, etc.)
cremote special-key --key="Enter" [--tab="<tab-id>"] [--timeout=5]
cremote special-key --key="Escape" [--tab="<tab-id>"] [--timeout=5]
cremote special-key --key="ArrowUp" [--tab="<tab-id>"] [--timeout=5]
cremote special-key --key="F1" [--tab="<tab-id>"] [--timeout=5]
# Click with modifier keys (Ctrl+click, Shift+click for multi-selection)
cremote modifier-click --selector=".selectable-item" --modifiers="Ctrl" [--tab="<tab-id>"] [--timeout=5]
cremote modifier-click --selector=".list-item" --modifiers="Shift" [--tab="<tab-id>"] [--timeout=5]
cremote modifier-click --selector=".table-row" --modifiers="Ctrl+Shift" [--tab="<tab-id>"] [--timeout=5]
```
**Advanced Use Cases:**
- **Context Menu Testing**: Right-click to test context menus and their functionality
- **Accessibility Testing**: Full keyboard navigation support for accessibility compliance
- **Tooltip/Dropdown Testing**: Hover interactions for UI elements that appear on mouse over
- **Multi-Selection Testing**: Ctrl+click and Shift+click for testing selection interfaces
- **Copy/Paste Workflows**: Test clipboard operations with Ctrl+A, Ctrl+C, Ctrl+V
- **Precise Mouse Control**: Pixel-perfect mouse positioning and scrolling
- **Function Key Testing**: Test application shortcuts using F1-F12 keys
- **Arrow Key Navigation**: Test keyboard navigation in lists, tables, and forms
**Technical Details:**
- Uses Chrome DevTools Protocol's Input domain for precise control
- Supports all modifier keys: Ctrl, Alt, Shift, Meta/Cmd
- Comprehensive key mapping for 60+ keys including letters, numbers, function keys, special keys
- Proper modifier key sequencing (key down → action → key up)
- Element positioning using content quads for pixel-perfect accuracy
- Mouse button differentiation (Left, Right, Middle)
- Realistic interaction patterns matching human behavior
### Connecting to a Remote Daemon
By default, the client connects to a daemon running on localhost. To connect to a daemon running on a different host: