Playwright Actions Guide (2026): Click, Fill, Hover, Drag & Drop, Upload Files & More

Playwright Actions Explained: Click(), Fill(), Hover(), Drag & Drop, Upload Files & More (2026)

Reading Time: 20 Minutes

Level: Beginner to Advanced

Category: Playwright Tutorial

Every automation script performs one simple sequence:

Locate Element
        ↓
Perform Action
        ↓
Validate Result

You already learned how to locate elements using Playwright Locators and how to verify them using Assertions. Now it's time to understand the most important part of automation—performing user actions.

Whether you're automating a login page, testing an e-commerce checkout, uploading files, selecting dropdown values, dragging Kanban cards, or filling complex forms, you'll use Playwright Actions in almost every test case.

In this guide you'll learn every important Playwright Action with practical examples, interview questions, certification notes, and enterprise best practices.

---

Table of Contents

• What are Playwright Actions?
• Why Actions Matter
• click()
• dblclick()
• Right Click
• Click Options
• Force Click
• Real World Login Example

---

What Are Playwright Actions?

Actions are operations performed on web elements to simulate real user behavior.

Imagine a user visiting an application. They don't simply view the page—they interact with it.

Typical user interactions include:

• Clicking Buttons
• Typing Text
• Selecting Dropdown Values
• Uploading Files
• Hovering Menus
• Dragging Items
• Checking Checkboxes
• Scrolling Pages

Playwright provides dedicated APIs for each of these interactions.

Example:

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

This performs exactly what a real user would do when clicking the Login button.

---

Why Playwright Actions Are Better

Traditional automation frameworks often required engineers to manually handle synchronization before every action.

Thread.sleep(5000);

driver.findElement(...).click();

Problems:

• Slow Tests
• Random Failures
• Hard Maintenance
• Unnecessary Waiting

Playwright automatically waits until elements become actionable.

Before clicking, Playwright checks:

• Visible
• Stable
• Enabled
• Receiving Events

This dramatically improves reliability.

---

Understanding click()

The click() method is the most frequently used Playwright action.

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

Although this appears simple, Playwright performs multiple internal validations before executing the click.

Find Element
        ↓
Wait Until Visible
        ↓
Wait Until Stable
        ↓
Wait Until Enabled
        ↓
Perform Click

No manual synchronization is required.

Example – Login Button

await page.goto('/login');

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

If the Login button is temporarily disabled while the page loads, Playwright waits automatically before clicking.

---

Double Click (dblclick)

Some applications require a double-click instead of a single click.

Examples include:

• Opening folders
• Editing table cells
• Desktop-style web applications

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

This simulates two rapid mouse clicks on the same element.

Real Example

Imagine a document management system. Double-clicking a PDF opens the preview window.

await page
.getByText(
'Invoice.pdf'
)
.dblclick();

---

Right Click (Context Click)

Many enterprise applications use context menus.

Examples:

• File Explorer
• Admin Dashboards
• Project Management Tools
• CRM Systems

Playwright supports right-click using:

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

After opening the context menu:

await page
.getByText(
'Rename'
)
.click();

This closely mimics real user behavior.

---

Click Options

The click() method supports several useful options.

Click With Delay

await page
.locator(
'#submit'
)
.click({
delay:300
});

This adds a short delay before releasing the mouse button.

Click Multiple Times

await page
.locator(
'#counter'
)
.click({
clickCount:3
});

Useful for components that react to multiple clicks.

Click Using Mouse Button

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

Supported buttons:

• left
• right
• middle

---

Force Click

Sometimes applications intentionally block interaction.

Example:

• Overlay Screens
• Temporary Animations
• Complex UI Frameworks

In such situations:

await page
.locator(
'#submit'
)
.click({
force:true
});

Force clicking ignores some actionability checks.

Use this only when absolutely necessary. Overusing force:true may hide genuine application issues.

---

Real Login Example

await page.goto('/login');

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

await page
.getByLabel(
'Password'
)
.fill(
'Password123'
);

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

await expect(page)
.toHaveURL(
/dashboard/
);

This example demonstrates the most common Playwright action sequence:

Navigate
        ↓
Fill Email
        ↓
Fill Password
        ↓
Click Login
        ↓
Verify Dashboard

This pattern appears in thousands of real-world automation scripts and is one of the first scenarios interviewers expect Playwright engineers to understand.

---

Understanding fill()

The fill() method is used to enter text into input fields. It is one of the most frequently used Playwright actions because almost every web application contains forms.

Unlike keyboard typing, fill() automatically clears the existing value before inserting new text.

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

Behind the scenes Playwright performs several validations before entering text.

Locate Input
        ↓
Wait Until Visible
        ↓
Wait Until Enabled
        ↓
Clear Existing Value
        ↓
Insert New Text

This makes the method reliable even when forms are loaded dynamically.

Real Example – Login Form

await page
.getByLabel(
'Username'
)
.fill(
'john.doe'
);

await page
.getByLabel(
'Password'
)
.fill(
'Password@123'
);

Because fill() replaces the existing content, you don't need to manually clear the field beforehand.

---

clear()

Sometimes applications already contain pre-filled values.

Playwright provides the clear() method to remove all existing content from an editable input.

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

Typical scenarios include:

• Editing user profiles
• Updating search filters
• Resetting forms
• Regression testing

Although fill() automatically replaces text, clear() improves readability when the test intention is specifically to empty the field.

---

press()

Many applications respond to keyboard keys rather than mouse clicks.

Playwright supports this through the press() method.

await page
.locator('#search')
.press('Enter');

This simulates pressing the Enter key after typing.

Search Example

await page
.getByPlaceholder(
'Search Products'
)
.fill(
'Wireless Mouse'
);

await page
.locator('#search')
.press('Enter');

This approach closely resembles how users interact with search bars.

Popular Keys

Key	Purpose
Enter	Submit Forms
Escape	Close Dialogs
Tab	Navigate Inputs
ArrowDown	Select Dropdown Items
ArrowUp	Move Up
Delete	Delete Characters
Backspace	Remove Previous Character

---

Keyboard API

The Keyboard API gives full control over keyboard interactions.

Typing Text

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

Keyboard Shortcut

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

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

Common keyboard shortcuts used during automation:

• Ctrl + A
• Ctrl + C
• Ctrl + V
• Ctrl + S
• Ctrl + Z
• Ctrl + Y
• Escape
• Tab

Copy and Paste Example

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

Keyboard automation is particularly useful for testing rich text editors and spreadsheet-like applications.

---

Mouse API

Although most automation relies on locators, Playwright also provides low-level mouse control.

Move Mouse

await page.mouse.move(
250,
350
);

Mouse Click

await page.mouse.click(
250,
350
);

Double Click

await page.mouse.dblclick(
250,
350
);

Mouse Down

await page.mouse.down();

Mouse Up

await page.mouse.up();

These APIs are commonly used for drawing applications, maps, diagrams, and complex canvas interactions.

---

hover()

Many modern web applications reveal hidden elements only when the mouse hovers over them.

Examples include:

• Mega Menus
• User Profile Menus
• Product Quick Actions
• Tooltips

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

After hovering, new elements become visible.

await page
.getByRole(
'link',
{ name:'Settings' }
)
.click();

E-commerce Example

An online shopping website displays the "Add to Cart" button only when a user hovers over a product card.

await page
.locator('.product-card')
.hover();

await page
.getByRole(
'button',
{ name:'Add to Cart' }
)
.click();

Without hovering first, the button would remain hidden.

---

Real Search Example

await page.goto('/products');

await page
.getByPlaceholder(
'Search Products'
)
.fill(
'Laptop'
);

await page
.locator('#search')
.press('Enter');

await expect(
page.getByText('Gaming Laptop')
).toBeVisible();

This example combines multiple Playwright actions in a realistic business scenario:

Open Page
        ↓
Fill Search Box
        ↓
Press Enter
        ↓
Display Results
        ↓
Validate Product

---

Best Practices

• Use fill() instead of manually typing when you only need to set a value.
• Use press() for keyboard-driven workflows such as search and shortcuts.
• Use hover() before interacting with hidden menus or controls.
• Prefer locator-based actions over coordinate-based mouse actions whenever possible.
• Keep tests readable by choosing actions that clearly express user intent.

---

Understanding dragAndDrop()

Modern web applications frequently allow users to move elements using drag-and-drop interactions.

Examples include:

• Kanban Boards
• Trello-like Applications
• Jira Sprint Boards
• Dashboard Widgets
• Image Upload Areas
• File Management Systems

Playwright provides an easy method for performing drag-and-drop operations.

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

Behind the scenes Playwright performs:

Locate Source
        ↓
Locate Target
        ↓
Mouse Down
        ↓
Move Mouse
        ↓
Mouse Up

This closely mimics real user behavior.

---

Kanban Board Example

Imagine a project management application where a task moves from "To Do" to "In Progress".

await page.dragAndDrop(
'#todo-task',
'#in-progress-column'
);

Expected Result:

Task Status
↓

In Progress

This is one of the most common enterprise automation scenarios.

---

Uploading Files

Many business applications allow users to upload files.

Examples:

• Resume Upload
• Profile Picture
• Invoice
• Purchase Order
• KYC Documents

Playwright supports uploads without interacting with the operating system dialog.

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

The browser file picker never appears. Playwright directly assigns the file.

---

Upload Multiple Files

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

Useful for document management systems.

---

Remove Uploaded File

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

Passing an empty array clears the selected files.

---

Dropdown Selection

Dropdown menus are common in registration forms and settings pages.

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

Select By Label

await page
.locator(
'#country'
)
.selectOption({
label:'India'
});

Select By Value

await page
.locator(
'#country'
)
.selectOption({
value:'IN'
});

Select Multiple Values

await page
.locator(
'#skills'
)
.selectOption([
'Java',
'Playwright'
]);

---

Checkbox Actions

Checkboxes allow multiple selections.

await page
.getByRole(
'checkbox',
{
name:'Remember Me'
}
)
.check();

Uncheck:

await page
.getByRole(
'checkbox',
{
name:'Remember Me'
}
)
.uncheck();

Playwright automatically checks the current state before performing the action.

---

Radio Buttons

Radio buttons allow only one selection.

await page
.getByLabel(
'Male'
)
.check();

Another example:

await page
.getByLabel(
'Credit Card'
)
.check();

---

focus()

Some validations begin only after an input receives focus.

await page
.locator(
'#email'
)
.focus();

Typical use cases:

• Input Validation
• Auto Suggestions
• Rich Editors

---

blur()

Many forms validate data when users leave an input field.

await page
.locator(
'#email'
)
.blur();

Common example:

Focus Email
↓

Enter Email

↓

Blur

↓

Validation Message Appears

---

scrollIntoViewIfNeeded()

Some elements exist outside the visible viewport.

Instead of manually scrolling, Playwright provides:

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

Playwright scrolls only if necessary.

---

Banking Application Example

await page.goto('/transfer');

await page
.getByLabel(
'Account Number'
)
.fill(
'123456789'
);

await page
.getByLabel(
'Amount'
)
.fill(
'5000'
);

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

await expect(
page.getByText(
'Transfer Successful'
)
).toBeVisible();

Workflow:

Fill Details
↓

Click Transfer

↓

Wait For Processing

↓

Validate Success

---

E-Commerce Example

await page.goto('/products');

await page
.getByPlaceholder(
'Search Products'
)
.fill(
'Wireless Mouse'
);

await page
.locator('.product-card')
.hover();

await page
.getByRole(
'button',
{
name:'Add to Cart'
}
)
.click();

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

This demonstrates multiple actions working together.

---

HRMS Example

await page.goto('/employee');

await page
.getByLabel(
'Employee Name'
)
.fill(
'John Smith'
);

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

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

await expect(
page.getByText(
'Employee Created'
)
).toBeVisible();

This type of scenario is frequently automated in enterprise HRMS applications.

---

Common Mistakes

• Using waitForTimeout() before every action.
• Using coordinate-based clicks when locator-based actions are possible.
• Forcing clicks without understanding why the element is blocked.
• Uploading files through the operating system dialog instead of setInputFiles().
• Using fragile XPath locators for simple actions.

---

Enterprise Best Practices

• Always use accessibility locators whenever possible.
• Keep actions close to assertions for better readability.
• Create reusable helper methods for repetitive workflows.
• Use Page Object Models to centralize actions.
• Let Playwright handle synchronization instead of adding manual waits.

---

Interview Questions

1. What are Playwright Actions?

Playwright Actions are methods that simulate real user interactions such as clicking buttons, filling forms, hovering over menus, uploading files, dragging elements, and selecting dropdown values.

---

2. What is the difference between click() and dblclick()?

click()	dblclick()
Single Mouse Click	Double Mouse Click
Most Common Action	Used for special UI interactions
Buttons	Desktop-style Applications

---

3. What is the difference between fill() and keyboard.type()?

fill()	keyboard.type()
Clears existing value	Types character by character
Faster	Simulates actual typing
Preferred for forms	Useful for editor testing

---

4. How do you upload files in Playwright?

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

---

5. How do you perform Drag & Drop?

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

---

6. What is hover() used for?

Hover is used for:

• Dropdown Menus
• Tooltips
• Hidden Buttons
• Mega Menus
• User Profile Menus

---

7. Why is click() more reliable in Playwright?

Because Playwright automatically performs Actionability Checks before clicking.

• Visible
• Stable
• Enabled
• Receives Events

---

Playwright Certification Notes

If you're preparing for Playwright certifications or automation interviews, remember these methods:

click()

dblclick()

fill()

clear()

press()

hover()

dragAndDrop()

setInputFiles()

selectOption()

check()

uncheck()

focus()

blur()

scrollIntoViewIfNeeded()

keyboard.press()

keyboard.type()

mouse.click()

mouse.move()

---

Best Practices

• Always prefer getByRole() over fragile CSS selectors.
• Use fill() for text fields instead of manually typing unless typing behavior is being tested.
• Avoid force:true unless absolutely necessary.
• Use hover() only when UI genuinely requires mouse hover.
• Validate every important action using Playwright Assertions.
• Trust Playwright Auto-Waiting instead of adding waitForTimeout().
• Keep Page Object Methods small and reusable.
• Write actions exactly as users perform them.

---

Common Mistakes Beginners Make

• Adding unnecessary waitForTimeout() after every action.
• Using XPath for every interaction.
• Ignoring Actionability Checks.
• Using coordinate clicks instead of locator-based clicks.
• Not validating action results using expect().
• Uploading files using OS dialogs instead of setInputFiles().
• Creating long, difficult-to-maintain test methods.

---

Quick Comparison

Action	Purpose	Typical Usage
click()	Click Button	Login, Submit
fill()	Enter Text	Forms
hover()	Reveal Hidden Elements	Menus
dragAndDrop()	Move Elements	Kanban Boards
selectOption()	Select Dropdown	Registration Forms
check()	Select Checkbox	Preferences
setInputFiles()	Upload Files	Resume, Invoice

---

Frequently Asked Questions (FAQs)

Which Playwright Action is used the most?

click() is the most frequently used Playwright action.

Does click() automatically wait?

Yes. Playwright automatically waits until the element becomes actionable.

How do I upload multiple files?

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

Should I use force:true?

Only when absolutely necessary. It should not be used to hide real application issues.

Which actions are most commonly asked in interviews?

• click()
• fill()
• hover()
• dragAndDrop()
• setInputFiles()
• selectOption()

---

Conclusion

Playwright Actions form the foundation of every automation framework. Without actions, automation cannot interact with applications. Without assertions, actions cannot be validated. Without locators, actions cannot find elements. Together they create the complete automation workflow.

Locate Element
        ↓
Perform Action
        ↓
Validate Result

Mastering these actions will help you write reliable, maintainable, and enterprise-ready automation frameworks. Whether you're preparing for Playwright interviews, building enterprise test suites, or learning automation from scratch, understanding Actions is an essential milestone in your journey.

---

About Bugged But Happy

Bugged But Happy is dedicated to helping QA Engineers, Automation Testers, SDETs, and Software Professionals master modern software testing through practical, real-world tutorials.

We publish in-depth guides on:

• Playwright Automation
• API Testing
• Manual Testing
• Automation Framework Design
• Performance Testing
• Testing Career Guidance
• Interview Preparation
• Certification Notes

Learning, Testing, and Growing One Bug at a Time.

🌐 https://thebuggedbuthappy.blogspot.com/

---

Continue Learning

• What is Playwright?
• Installing Playwright
• Playwright Architecture
• Playwright Test Runner
• Playwright Locators
• Playwright Assertions
• Playwright Auto-Waiting

---

Next Blog

Playwright Frames & iFrames Explained: Complete Guide (2026)

In the next article, you'll learn how to automate content inside iframes using frameLocator(), handle nested frames, work with third-party widgets like Stripe and PayPal, and follow best practices for reliable frame automation.