When testing web applications with Playwright or Selenium, you might notice something strange when a JavaScript alert pops up after clicking a submit button.

Key Difference:

In Playwright, you need to handle the alert before clicking the button.

In Selenium, you handle the alert after clicking the button.

✅Selenium – Handle Alert After Clicking

// Click the button that triggers the alert
driver.findElement(By.id("submit")).click();

// Switch to alert and accept it
driver.switchTo().alert().accept();

✅Playwright - Handle Alert Before Clicking

// Setting up alert handler BEFORE the click
page.onceDialog(dialog -> dialog.accept());

// Now click the button that triggers the alert 
page.click("#submit");

To understand why alert handling works differently, we need to look under the hood — at how Selenium and Playwright talk to the browser.

🧰 Selenium: WebDriver Protocol (Remote Control)

Selenium uses the WebDriver protocol, which sends commands (like clicks or alert handling) to the browser through a remote server.

Here's what happens:

1. You write test code.
2. Selenium sends that command (e.g. click()) to the browser through WebDriver.
3. The browser processes it and returns a response.
4. Selenium waits for changes — like waiting for an alert to appear.

🎯 Selenium is like a remote control for your browser.

It clicks, waits, checks — all step-by-step.

✅ That’s why it can handle alerts after the click — it polls for the alert and handles it when it becomes visible.

⚙️ Playwright: DevTools Protocol (Native, Event-Based)

Playwright uses the Chrome DevTools Protocol (CDP) (or equivalents for other browsers). This gives it low-level, event-based access to the browser.

Here’s how it works:

1. You tell Playwright to watch for an alert.
2. Playwright connects directly to the browser’s internal events.
3. When the alert shows up, Playwright catches it — but only if it was already watching.
4. Then you click the button that causes the alert.

🎯 Playwright is like being inside the browser’s brain.

It sees events as they happen, not after.

❌ If you're not listening before the alert shows up, Playwright misses it — and your test fails.

 Why This Matters for Alert Handling

• Selenium is reactive. It can click, then wait and switch to an alert after it's visible.
• Playwright is proactive. It expects you to set up listeners ahead of time for anything asynchronous, like alerts, downloads, or popups.

So, the difference in alert-handling timing isn't random — it's rooted in how each tool connects to the browser itself.

✅ Final Takeaways

• Use Selenium for more traditional, synchronous step-by-step testing — it’s more forgiving with timing.
• Use Playwright for faster, more event-driven testing — but you must prepare for events before triggering them.