testdriverai/testdriver:hover
Hover over elements or coordinates
npx skills add https://github.com/testdriverai/testdriverai --skill testdriver:hover
<!-- Generated from hover.mdx. DO NOT EDIT. -->
Move the mouse cursor over elements or specific coordinates without clicking, useful for revealing tooltips, dropdowns, and hover effects.
Hover over a located element.
await element.hover()
Promise<void>
// Find and hover
const tooltip = await testdriver.find('info icon');
await tooltip.hover();
// Wait to see tooltip
await new Promise(r => setTimeout(r, 1000));
// Hover over menu to reveal submenu
const menu = await testdriver.find('Products menu');
await menu.hover();
const submenu = await testdriver.find('Laptops submenu item');
await submenu.click();
Hover at specific screen coordinates.
await testdriver.hover(x, y)
<ParamField path="x" type="number" required>
X coordinate
</ParamField>
<ParamField path="y" type="number" required>
Y coordinate
</ParamField>
Promise<void>
// Hover at coordinates
await testdriver.hover(500, 300);
// Hover and wait
await testdriver.hover(500, 300);
await new Promise(r => setTimeout(r, 1000));
<Check>
Prefer element hover over coordinates
// ✅ Preferred
const icon = await testdriver.find('info icon');
await icon.hover();
// ❌ Avoid
await testdriver.hover(500, 300);
</Check>
<Check>
Wait after hovering for dynamic content
const menuItem = await testdriver.find('Settings menu');
await menuItem.hover();
// Wait for submenu to appear
await new Promise(r => setTimeout(r, 500));
const subItem = await testdriver.find('Profile submenu');
await subItem.click();
</Check>
<Check>
Verify element was found before hovering
const element = await testdriver.find('tooltip trigger');
if (!element.found()) {
throw new Error('Element not found');
}
await element.hover();
</Check>
<AccordionGroup>
<Accordion title="Tooltips">
// Hover to show tooltip
const icon = await testdriver.find('help icon');
await icon.hover();
await new Promise(r => setTimeout(r, 1000));
// Read tooltip content
const tooltipText = await testdriver.extract('the tooltip text');
console.log('Tooltip:', tooltipText);
</Accordion>
<Accordion title="Dropdown Menus">
// Hover to reveal dropdown
const menuItem = await testdriver.find('Products menu item');
await menuItem.hover();
// Wait for dropdown animation
await new Promise(r => setTimeout(r, 500));
// Click submenu option
const category = await testdriver.find('Electronics category');
await category.click();
</Accordion>
<Accordion title="Image Previews">
// Hover over thumbnail to see preview
const thumbnail = await testdriver.find('product thumbnail');
await thumbnail.hover();
await new Promise(r => setTimeout(r, 800));
// Verify preview appears
await testdriver.assert('product preview is displayed');
</Accordion>
<Accordion title="Hover Effects">
// Test hover state styling
const button = await testdriver.find('call to action button');
await button.hover();
await new Promise(r => setTimeout(r, 500));
// Verify hover effect
await testdriver.assert('button background changed to blue');
</Accordion>
<Accordion title="Drag and Drop">
// Use hover in drag and drop
const item = await testdriver.find('draggable item');
await item.mouseDown();
// Hover over drop zone
const dropZone = await testdriver.find('drop area');
await dropZone.hover();
await new Promise(r => setTimeout(r, 300));
await dropZone.mouseUp();
</Accordion>
</AccordionGroup>
import { beforeAll, afterAll, describe, it } from 'vitest';
import TestDriver from 'testdriverai';
describe('Hover Interactions', () => {
let testdriver;
beforeAll(async () => {
client = new TestDriver(process.env.TD_API_KEY);
await testdriver.auth();
await testdriver.connect();
});
afterAll(async () => {
await testdriver.disconnect();
});
it('should show tooltip on hover', async () => {
await testdriver.focusApplication('Google Chrome');
// Find and hover over icon
const infoIcon = await testdriver.find('information icon');
await infoIcon.hover();
// Wait for tooltip to appear
await new Promise(r => setTimeout(r, 1000));
// Verify tooltip is visible
await testdriver.assert('tooltip is displayed');
// Extract tooltip text
const tooltipText = await testdriver.extract('the tooltip message');
console.log('Tooltip says:', tooltipText);
});
it('should navigate dropdown menu', async () => {
// Hover over main menu
const menu = await testdriver.find('Navigation menu');
await menu.hover();
// Wait for dropdown
await new Promise(r => setTimeout(r, 500));
// Hover over submenu item
const submenu = await testdriver.find('Account submenu');
await submenu.hover();
await new Promise(r => setTimeout(r, 300));
// Click nested menu item
const settings = await testdriver.find('Settings option');
await settings.click();
await testdriver.assert('settings page is displayed');
});
it('should preview images on hover', async () => {
// Hover over product image
const productImg = await testdriver.find('product 1 thumbnail');
await productImg.hover();
// Wait for preview
await new Promise(r => setTimeout(r, 800));
// Verify preview appeared
await testdriver.assert('large product preview is shown');
// Move away
const otherElement = await testdriver.find('page heading');
await otherElement.hover();
// Verify preview disappeared
await new Promise(r => setTimeout(r, 500));
await testdriver.assert('product preview is hidden');
});
});
find() - Locate elements to hoverclick() - Click after hoveringmouseDown() - Start drag operationsTake testdriverai/testdriver:hover from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.