🖼️ iframe · Alert · Popup · Multiple Tabs

iframe · Alert · Popup · Multiple Tabs: An iframe is an independent document window inside a page — like a tenant office inside a large office building: the building has its own

An iframe is an independent document window inside a page — like a tenant office inside a large office building: the building has its own security, elevators, and staff, but the tenant office has its own door and receptionist; to reach a tenant's employee you first pass through the building's main entrance, then enter through the tenant's own door. Why was this so painful in Selenium? You called switchTo().frame(index) to change context, and when done you had to call switchTo().defaultContent() to return to the main page — tracking which frame you were in, especially in nested frames, created real overhead and error-prone state management. In Java you did this manually: if you skipped a frame, you got "Unable to locate element" and spent minutes hunting down the source of the error. In Playwright, page.frameLocator("iframe[name='payment']").locator("#cardNumber").fill("4242") is all you need — context switching and returning are managed automatically. The QA reality: payment widgets, chat tools, and third-party form embeds almost universally use iframes; you cannot write real-world e-commerce test scenarios without mastering this section.

Micro Lab: Playwright — Actions

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Playwright — Actions

Prepare the locator with page.locator() or getByRole()

Understand auto-wait

Remember Playwright auto-wait logic: waits until actionable

Perform click(), fill(), press(), selectOption() action

Track DOM change after action (new page, modal, error message)

Prove the result with await expect(locator).toBeVisible() or toHaveText()

What is the Playwright UI action and verification order?

2️⃣ Alert · Confirm · Prompt

Micro Lab: Playwright — Locator selection

Why Does the Order of page.on('dialog', ...) Matter So Much?