Documentation Index
Fetch the complete documentation index at: https://docs.testdriver.ai/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The mouseDown() method presses the mouse button at an element’s location without releasing it. This is useful for drag operations, custom gestures, or when you need precise control over mouse events. You can either call it on an Element instance or use it directly with a selector.
Syntax
// Mouse down on an element
await element.mouseDown();
// Mouse down using a selector
await ai.mouseDown('selector');
Parameters
When called on an Element, no parameters are required.
When called directly on the AI client:
| Parameter | Type | Description |
|---|
selector | string | The selector describing the element where the mouse button should be pressed |
Returns
Returns a Promise<void> that resolves when the mouse button is pressed.
Examples
Basic Drag Operation
// Start dragging an item
const dragItem = await ai.find('file to drag');
await dragItem.mouseDown();
// Move to drop target
const dropTarget = await ai.find('folder to drop into');
await dropTarget.hover();
// Release
await ai.mouseUp();
Drag and Drop with Direct Selectors
await ai.mouseDown('draggable card');
await ai.hover('drop zone');
await ai.mouseUp();
Selecting Multiple Items
import { test } from 'vitest';
import { chrome } from '@testdriver/sdk';
test('selects multiple items with click and drag', async () => {
const { ai } = await chrome('https://app.example.com');
// Start selection at first item
await ai.mouseDown('first item in grid');
// Drag to last item
await ai.hover('last item in grid');
// Release to complete selection
await ai.mouseUp();
// Verify multiple items selected
const selectedItems = await ai.find('selected items count');
expect(selectedItems.text).toContain('5 items selected');
});
Custom Drawing Application
test('draws on canvas', async () => {
const { ai } = await chrome('https://drawing-app.example.com');
// Start drawing
await ai.mouseDown('canvas at top-left corner');
// Draw a line by moving mouse
await ai.hover('canvas at center');
await ai.hover('canvas at bottom-right corner');
// Stop drawing
await ai.mouseUp();
// Verify something was drawn
const canvas = await ai.exec('document.querySelector("canvas").toDataURL()');
expect(canvas).toBeTruthy();
});
Long Press Gesture
test('triggers long press menu', async () => {
const { ai } = await chrome('https://mobile-app.example.com');
// Press and hold
await ai.mouseDown('message in chat');
// Wait for long-press menu
await new Promise(resolve => setTimeout(resolve, 500));
// Verify menu appeared before releasing
const menu = await ai.find('message options menu');
expect(menu).toBeTruthy();
// Release
await ai.mouseUp();
});
Resizing UI Elements
test('resizes panel', async () => {
const { ai } = await vscode();
// Grab resize handle
await ai.mouseDown('sidebar resize handle');
// Drag to new position
await ai.hover('position 300 pixels from left edge');
// Release
await ai.mouseUp();
// Verify new size
const sidebar = await ai.find('sidebar');
expect(sidebar.width).toBeGreaterThan(250);
});
Important Notes
- Always pair
mouseDown() with mouseUp() to complete the gesture
- The mouse button remains pressed until
mouseUp() is called
- Use
hover() to move the mouse while the button is pressed
- For simple drag operations, consider using
ai() with a natural language description like "drag file to folder"