/testdriver-interacting-with-your-app

name: testdriver:interacting-with-your-app
description: Click, hover, drag, and interact with located UI elements

<!-- Generated from interacting-with-your-app.mdx. DO NOT EDIT. -->

Overview

Once you've [located an element](/locating-elements), the `Element` object exposes methods to interact with it. Use these to click, hover, and perform mouse operations that drive your app.

Interaction Methods

click()

Click on the element.

await element.click(action)

**Parameters:**

• `action` (string, optional) - Type of click: `'click'` (default), `'double-click'`, `'right-click'`, `'hover'`, `'mouseDown'`, `'mouseUp'`

**Returns:** `Promise<void>`

**Example:**

const button = await testdriver.find('submit button');
await button.click(); // Regular click

const file = await testdriver.find('document.txt');
await file.click('double-click'); // Double-click

const menu = await testdriver.find('settings icon');
await menu.click('right-click'); // Right-click

<Note> The element must be found before clicking. The `find()` method automatically locates the element. </Note>

hover()

Hover over the element without clicking.

await element.hover()

**Returns:** `Promise<void>`

**Example:**

const tooltip = await testdriver.find('info icon');
await tooltip.hover();
// Wait to see tooltip
await new Promise(resolve => setTimeout(resolve, 1000));

doubleClick()

Double-click on the element.

await element.doubleClick()

**Returns:** `Promise<void>`

**Example:**

const file = await testdriver.find('README.txt file icon');
await file.doubleClick();

rightClick()

Right-click on the element to open context menu.

await element.rightClick()

**Returns:** `Promise<void>`

**Example:**

const folder = await testdriver.find('Documents folder');
await folder.rightClick();

mouseDown() / mouseUp()

Press or release mouse button on the element (for drag operations).

await element.mouseDown()
await element.mouseUp()

**Returns:** `Promise<void>`

**Example:**

// Drag and drop
const item = await testdriver.find('draggable item');
await item.mouseDown();

// Move to drop target (using coordinates or another element)
const target = await testdriver.find('drop zone');
await target.hover();
await target.mouseUp();

Examples

Basic Element Interaction

// Find and click
const submitButton = await testdriver.find('submit button');
await submitButton.click();

// Find, verify, then interact
const emailInput = await testdriver.find('email input field');
if (emailInput.found()) {
  await emailInput.click();
  await testdriver.type('user@example.com');
}

Working with Forms

// Fill out a multi-field form
const nameField = await testdriver.find('name input field');
await nameField.click();
await testdriver.type('John Doe');

const emailField = await testdriver.find('email input field');
await emailField.click();
await testdriver.type('john@example.com');

const submitButton = await testdriver.find('submit button');
await submitButton.click();

Conditional Interactions

// Check if element exists before interacting
const closeButton = await testdriver.find('close popup button');

if (closeButton.found()) {
  await closeButton.click();
  console.log('Popup closed');
} else {
  console.log('No popup to close');
}

Re-locating Dynamic Elements

// Element that moves or changes
const notification = await testdriver.find('success notification');

// Do something that might cause it to move
await testdriver.scroll('down', 300);

// Re-locate the element
await notification.find();

if (notification.found()) {
  await notification.click();
}

Best Practices

<AccordionGroup> <Accordion title="Reuse element references when possible"> If you need to interact with the same element multiple times, reuse the reference:

    const input = await testdriver.find('search input');
    await input.click();
    await testdriver.type('first search');
    await testdriver.pressKeys(['enter']);
    
    // Re-use the same element reference
    await input.click();
    await testdriver.pressKeys(['ctrl', 'a']); // Select all
    await testdriver.type('second search');

</Accordion> </AccordionGroup>