Playwright Keyboard and Mouse

A graphic designer drags an image across a canvas. A power user presses Control+S to save a document instead of clicking through menus. Some actions on the web need raw keyboard presses and precise mouse movements instead of simple clicks and typing, and Playwright gives testers direct control over both.

When Raw Input Is Needed

Normal Actions          Raw Input Needed
-------------           -----------------
Click a button           Press Enter to submit
Fill a text box          Hold Shift while clicking
Check a box              Drag an item across the screen

Pressing a Single Key

await page.getByLabel('Search').press('Enter');

This line presses the Enter key inside the search box, often triggering a search without needing to click a separate search button.

Pressing Keyboard Shortcuts

await page.keyboard.press('Control+A');
await page.keyboard.press('Control+C');

These lines select all text and copy it, mimicking a real keyboard shortcut a person might use while working with a text editor on the page.

Typing With Held Modifier Keys

await page.keyboard.down('Shift');
await page.locator('.list-item').nth(0).click();
await page.locator('.list-item').nth(3).click();
await page.keyboard.up('Shift');

Holding Shift while clicking two items selects everything in between, a pattern common in file managers and email inboxes for selecting multiple items.

Hovering With the Mouse

await page.locator('.menu-item').hover();

Hovering reveals dropdown menus or tooltips that only appear when a mouse pointer rests over an element without clicking it.

Moving the Mouse to Exact Coordinates

await page.mouse.move(300, 400);
await page.mouse.down();
await page.mouse.move(500, 400);
await page.mouse.up();

This sequence presses the mouse button down at one position, drags to another position, then releases it, useful for testing custom sliders or drawing tools.

Drag and Drop Between Elements

await page.locator('#task-card-1').dragTo(page.locator('#in-progress-column'));

This drags one element and drops it onto another in a single command, matching how a person moves a task card on a project board from "To Do" into "In Progress."

A Real-World Example: A Kanban Board

A project management website lets users drag task cards between columns labeled "To Do," "In Progress," and "Done." A test using dragTo confirms a card actually moves into the correct column and updates its status on the page.

Quick Practice Task

Find a website with a hover-based dropdown menu, such as a navigation bar. Write a test that hovers over the menu and clicks an option that only appears after hovering.

Key Takeaways

• The keyboard object sends raw key presses, including shortcuts.
• Hover reveals elements that depend on mouse position alone.
• Raw mouse control supports dragging, drawing, and sliders.
• dragTo simplifies drag-and-drop testing into a single command.