Testdriver mouse down

<!-- Generated from mouse-down.mdx. DO NOT EDIT. -->

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"

Related Methods

• mouseUp() - Release the mouse button
• hover() - Move mouse to element
• click() - Full click (mouseDown + mouseUp)
• doubleClick() - Double-click on element
• rightClick() - Right-click for context menu