Playwright Actions: Complete Guide to Click, Fill, Hover, Keyboard, Mouse & File Upload

What are Playwright Actions?

Playwright actions simulate real user interactions with a web application.

Every action automatically waits until the target element is ready before execution, making Playwright tests significantly more stable than traditional automation frameworks.

click()

Click is the most commonly used action.

await page.getByRole('button', {
    name: 'Login'
}).click();

Playwright automatically waits until the button is visible, enabled, and ready.

Double Click

await page.locator('.product')
    .dblclick();

Useful for desktop-style web applications.

Right Click

await page.locator('.menu')
    .click({
        button: 'right'
    });

Perfect for testing context menus.

dblclick()

Performs two rapid clicks on the target element.

await page.locator('.file').dblclick();

Use dblclick() when the application behavior depends on a double-click event.

check() & uncheck()

await page.getByRole('checkbox')
    .check();

await page.getByRole('checkbox')
    .uncheck();

Works for both checkboxes and radio buttons.

fill()

await page.getByLabel('Email')
    .fill('admin@test.com');

fill() automatically clears the existing value before entering new text.

clear()

await page.locator('#username')
    .clear();

Removes existing input.

press()

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

Common keys include:

• Enter
• Escape
• Tab
• ArrowDown
• ArrowUp
• Backspace

selectOption()

await page.locator('#country')
    .selectOption('USA');

You can also select by:

• value
• label
• index

hover()

await page.getByRole('button', {
    name: 'Products'
}).hover();

Useful for dropdown menus and tooltips.

dragAndDrop()

await page.dragAndDrop(
    '#source',
    '#target'
);

Ideal for Kanban boards and drag-and-drop interfaces.

File Upload

await page
    .locator('input[type=file]')
    .setInputFiles('resume.pdf');

Upload multiple files:

await page
    .locator('input[type=file]')
    .setInputFiles([
        'resume.pdf',
        'image.png'
    ]);

Keyboard Actions

await page.keyboard.type('Playwright');

Keyboard shortcut:

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

await page.keyboard.press('Delete');

Mouse Actions

await page.mouse.move(300, 200);

await page.mouse.down();

await page.mouse.up();

Useful for drawing applications and canvas testing.

Scroll

await page.mouse.wheel(0, 500);

Or scroll a specific element into view:

await page.locator('.footer')
    .scrollIntoViewIfNeeded();

Enterprise Best Practices

• Prefer semantic locators.
• Never use coordinates unless necessary.
• Avoid force clicking.
• Trust Playwright Auto Waiting.
• Build reusable Page Object methods.
• Use descriptive method names.

Common Mistakes

Avoid raw CSS selectors:

await page.click('#login');

Prefer semantic locators:

await page.getByRole('button', {
    name: 'Login'
}).click();

Avoid hard waits:

await page.waitForTimeout(5000);

Playwright already waits automatically.

Interview Questions

Difference between click() and dblclick()?

click() performs a single click. dblclick() performs two rapid clicks.

Why use fill() instead of type()?

fill() clears the field before entering text and is generally faster and simpler for standard input scenarios.

When should dragAndDrop() be used?

Whenever the application supports drag-and-drop interactions such as Kanban boards, dashboards, file organization, or workflow builders.

Summary

Playwright provides one of the richest action APIs available in modern test automation.

By combining automatic waiting with expressive action methods, Playwright enables engineers to build readable, maintainable, and highly reliable UI automation frameworks.

Mastering these actions is essential for becoming a professional Playwright automation engineer.