Beginner Chapter 5 · 13 min read

Actions & Interactions

Learn every user interaction Playwright supports — clicking, typing, hovering, drag-and-drop, keyboard shortcuts, and more.

Mouse Actions

Playwright simulates real user interactions at the browser level. click() moves the mouse to the element's centre, waits for it to be stable, and dispatches a pointer-down/pointer-up/click sequence. dblclick() fires two rapid clicks. hover() moves the mouse without clicking, which is useful for revealing tooltip menus. For drag-and-drop, use dragTo() with a target locator, or the lower-level mouse.move / mouse.down / mouse.up API for pixel-perfect control.

Keyboard and Form Actions

fill() replaces the entire input value at once (the fastest option for most forms). type() simulates key-by-key typing with realistic delays, useful when an application listens for individual keydown events. press() sends a single named key — including modifier combinations like Control+A or Shift+Tab. For dropdowns, selectOption() accepts a value, a label, or an index.

Tip: Prefer fill() over type() unless the application uses keydown event listeners for autocomplete or validation — fill() is faster and more deterministic in CI.

Checkboxes, Radio Buttons, and File Inputs

Use check() and uncheck() for checkboxes and radio buttons instead of click() — these methods verify the current state first and only toggle if necessary. File inputs are handled with setInputFiles(), which accepts a path, an array of paths, or an object with a buffer for in-memory files. You never need to interact with the native OS file-picker dialog.

actions.spec.js

import { test, expect } from '@playwright/test';

test('comprehensive actions demo', async ({ page }) => {
  await page.goto('/form-demo');

  // fill — fastest way to set an input value
  await page.getByLabel('Username').fill('john_doe');

  // type — simulates real keystrokes
  await page.getByLabel('Search').type('pla', { delay: 100 });

  // press — keyboard shortcuts
  await page.keyboard.press('Control+A');
  await page.keyboard.press('Delete');

  // selectOption — by value, label, or index
  await page.getByLabel('Country').selectOption('us');
  await page.getByLabel('Color').selectOption({ label: 'Blue' });

  // check and uncheck
  await page.getByLabel('Accept terms').check();
  await expect(page.getByLabel('Accept terms')).toBeChecked();

  // hover to reveal a tooltip
  await page.getByTestId('info-icon').hover();
  await expect(page.getByRole('tooltip')).toBeVisible();

  // dragTo — drag card to a different column
  const card = page.getByTestId('card-1');
  const target = page.getByTestId('done-column');
  await card.dragTo(target);

  // double click to edit inline
  await page.getByText('Click to edit').dblclick();
});

ActionsTest.java

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.*;

class ActionsTest {
  void actionsDemo(Page page) {
    page.navigate("http://localhost:3000/form-demo");

    // Fill input value instantly
    page.getByLabel("Username").fill("john_doe");

    // Select dropdown option by value
    page.getByLabel("Country").selectOption("us");

    // Select by label text
    page.getByLabel("Color")
        .selectOption(new SelectOption().setLabel("Blue"));

    // Check a checkbox
    page.getByLabel("Accept terms").check();

    // Hover to reveal tooltip
    page.getByTestId("info-icon").hover();

    // Drag and drop
    page.getByTestId("card-1")
        .dragTo(page.getByTestId("done-column"));

    // Keyboard shortcut
    page.keyboard().press("Control+A");
    page.keyboard().press("Delete");
  }
}

test_actions.py

from playwright.sync_api import Page, expect

def test_actions_demo(page: Page):
    page.goto("/form-demo")

    # fill — replaces value instantly
    page.get_by_label("Username").fill("john_doe")

    # type — key-by-key with delay
    page.get_by_label("Search").type("pla", delay=100)

    # select_option by value or label
    page.get_by_label("Country").select_option("us")
    page.get_by_label("Color").select_option(label="Blue")

    # check and assert
    page.get_by_label("Accept terms").check()
    expect(page.get_by_label("Accept terms")).to_be_checked()

    # hover to show tooltip
    page.get_by_test_id("info-icon").hover()
    expect(page.get_by_role("tooltip")).to_be_visible()

    # drag and drop
    page.get_by_test_id("card-1").drag_to(
        page.get_by_test_id("done-column")
    )

    # keyboard press
    page.keyboard.press("Control+A")
    page.keyboard.press("Delete")

Playwright Beginner Actions & Interactions

PreviousLocators & Selectors Next Assertions

Written by PV