Playwright UI Handling: Alerts, New Tabs, Right-Click & Keyboard

Handling Alerts with the Dialog API

An alert is a browser message box that asks the user to perform an action, such as:

• "Are you sure?"
• "Click OK"
• "Enter your name"

A simple example is when your phone asks:

"Do you really want to delete this photo?"

Advertisement

Selecting OK deletes the photo, while Cancel closes the dialog without making any changes.

Interview Answer

"In Playwright, alerts are handled using the Dialog API. Playwright automatically listens for JavaScript dialogs and allows us to accept, dismiss, or provide input. We use the page.on('dialog') event to handle alerts, confirmation dialogs, and prompts."

Important Concept

Browser alerts are not part of the DOM, so they cannot be inspected using locators.

Instead, Playwright provides a dialog listener that automatically detects the alert and allows interaction.

Common Dialog Methods

Listen for Dialog

page.on('dialog')

Read Alert Message

dialog.message()

Accept (OK)

dialog.accept()

Dismiss (Cancel)

dialog.dismiss()

Enter Text into a Prompt

dialog.accept('Playwright User')

Summary

Real Project Example

In a banking application, deleting a customer record displayed a confirmation dialog.

The automation handled the dialog using the Dialog API, making alert handling simple, reliable, and more stable than traditional automation approaches.

Confirmation Popups

A confirmation popup is a JavaScript dialog that asks users to confirm an action before proceeding.

Since confirmation popups are not part of the DOM, they are handled using the same Dialog API.

Available Actions

Accept (OK)

dialog.accept()

Dismiss (Cancel)

dialog.dismiss()

Handling New Windows and Tabs

Playwright handles new browser windows or tabs using:

context.waitForEvent('page')

This is usually combined with Promise.all() so that Playwright waits for both:

• The click action
• The new page to open

Common Methods

Wait for New Page

context.waitForEvent('page')

Execute Click and Wait Together

Promise.all()

Work with the New Tab

newPage

Real Project Example (STAR)

A user clicked a link that opened content in a new browser tab.

Automation:

• Waited for the new page using context.waitForEvent('page').
• Performed validations on the new tab.
• Closed the tab or switched back to the parent page after validation.

Summary

Right-Click (Context Menus)

Right-click performs a mouse context click that typically opens a context menu.

Examples include:

• Browser context menus
• File managers
• Dashboards
• Data grids
• Custom application menus

Playwright Syntax

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

After opening the context menu, the required menu item can be located and clicked normally.

Project Usage

Right-click actions were commonly used for interacting with:

• File management screens
• Dashboard grids
• Custom context menus

Note: Your document contains a question titled "How do you hover over an element?", but the content beneath it explains right-click. The hover() method is only mentioned briefly among locator actions and has been intentionally flagged instead of being completed.

Keyboard Actions: fill() vs press()

Playwright provides two different approaches for keyboard interactions.

fill()

Used to enter text directly into input fields.

Common Usage

• Username fields
• Password fields
• Search boxes
• Form inputs

press()

Used to press keyboard keys instead of typing text.

Examples include:

• Enter
• Tab
• Arrow Keys
• Backspace
• Keyboard shortcuts

It can be performed using:

locator.press()

or

page.keyboard.press()

Real Project Usage

Keyboard actions were frequently used for:

• Search boxes
• Login forms
• Form submissions using the Enter key

According to your project notes, Playwright keyboard methods were easy to use, stable, and significantly reduced flaky behavior.

Checkboxes

Playwright provides built-in methods for selecting and deselecting checkboxes.

Check a Checkbox

await newsletter.check();

Select Multiple Checkboxes

await checkboxes.nth(0).check();

await checkboxes.nth(2).check();

Additional Methods

• check()
• uncheck()

Like other Playwright actions, checkbox operations automatically use built-in auto-waiting.

Testing Recommendation

Before validating checkbox behavior, verify the default state:

• Checked
• Unchecked

Then perform the required assertions.

FAQs

How do you handle alerts in Playwright?

Alerts are handled using the Dialog API.

Playwright listens for browser dialogs using:

page.on('dialog')

You can then:

• Read the dialog message
• Accept the dialog
• Dismiss the dialog
• Enter text into prompts

How do you handle confirmation popups?

Confirmation dialogs are handled using the same Dialog API by calling:

• dialog.accept()
• dialog.dismiss()

How do you handle new windows or tabs?

Use:

context.waitForEvent('page')

together with Promise.all() to capture the new page while performing the click action.

After completing validations, switch back to the parent page or close the new tab.

How do you perform a right-click in Playwright?

Use:

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

Then interact with the context menu normally.

How do you press Enter or Tab in Playwright?

Use:

locator.press('Enter')

or

page.keyboard.press()

Use fill() when entering text directly into input fields.

How do you handle checkboxes?

Use:

• check()
• uncheck()

For multiple checkboxes, use:

nth(index)

to select the required checkbox.

Question Listed but Not Answered in Your Document (Needs Your Input)

How Do You Hover Over an Element?

This question appears in your document, but the content beneath it explains right-click instead.

The hover() method is only mentioned briefly among locator actions.

A dedicated explanation covering:

• locator.hover()
• Hover menus
• Tooltips
• Real project examples