Actions

Click, fill, select, hover, drag, keyboard — Playwright's auto-waiting action APIs and when each one is the right tool.

practice site: DemoQA Forms

Auto-waiting

Every Playwright action waits for the element to be actionable before acting. “Actionable” means: visible, stable (not animating), enabled, and not covered by another element.

You never need await page.waitForSelector() before a click. Playwright retries until the element is ready or the timeout expires (default 30 s).

Click actions

// Basic click
await page.getByRole('button', { name: 'Submit' }).click();

// Double click
await page.getByRole('listitem').first().dblclick();

// Right click (opens context menu)
await page.getByRole('img', { name: 'thumbnail' }).click({ button: 'right' });

// Click with modifier key
await page.getByText('Select All').click({ modifiers: ['Meta'] }); // Cmd+click on Mac

// Click at specific coordinates within element
await page.getByRole('canvas').click({ position: { x: 100, y: 50 } });

// Force click — bypasses actionability checks (use sparingly)
await page.getByRole('button').click({ force: true });

Fill and type

// fill — clears the field then types (preferred for most inputs)
await page.getByPlaceholder('Username').fill('standard_user');

// type — types character by character, triggering key events (use for autocomplete inputs)
await page.getByRole('combobox').type('London');

// clear an input
await page.getByLabel('Search').clear();

// pressSequentially — like type, but with configurable delay between keys
await page.getByRole('textbox').pressSequentially('hello', { delay: 50 });

Select dropdowns

// Select by visible text
await page.getByRole('combobox', { name: 'Country' }).selectOption('United Kingdom');

// Select by value attribute
await page.getByRole('combobox').selectOption({ value: 'uk' });

// Select multiple options (for multi-select)
await page.getByRole('listbox').selectOption(['option1', 'option2']);

Hover

// Hover to reveal a dropdown menu
await page.getByRole('menuitem', { name: 'Account' }).hover();
await page.getByRole('menuitem', { name: 'Settings' }).click();

Keyboard

// Press a key (works on focused element)
await page.getByRole('textbox').press('Enter');
await page.getByRole('textbox').press('Tab');
await page.getByRole('textbox').press('Escape');

// Keyboard shortcuts
await page.keyboard.press('Control+A');   // Select all
await page.keyboard.press('Control+C');   // Copy
await page.keyboard.press('Control+Z');   // Undo

// Hold a key while performing actions
await page.keyboard.down('Shift');
await page.getByText('Item 3').click();
await page.keyboard.up('Shift');

Drag and drop

// dragTo — drag element to a target element
await page.getByTestId('drag-source').dragTo(page.getByTestId('drop-target'));

// Precise drag with coordinates
await page.getByTestId('draggable').dragTo(page.getByTestId('droppable'), {
  sourcePosition: { x: 10, y: 10 },
  targetPosition: { x: 50, y: 50 },
});

Reference