Day 10: Handling Iframes, Popups, Dialogs, and New Tabs

This is Day 10 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Selenium makes iframes and popups painful. Playwright handles them natively — no driver.switchTo() needed.

Iframes

// Access iframe content directly
await page.frameLocator('#payment-iframe')
  .getByRole('button', { name: 'Pay' }).click();

// Nested iframes
await page.frameLocator('#outer')
  .frameLocator('#inner')
  .getByLabel('Card number').fill('4242424242424242');

Dialogs (Alert/Confirm/Prompt)

// Handle before triggering
page.on('dialog', async dialog => {
  expect(dialog.message()).toBe('Are you sure?');
  await dialog.accept(); // or dialog.dismiss()
});
await page.getByRole('button', { name: 'Delete' }).click();

// Prompt dialog with input
page.on('dialog', async dialog => {
  await dialog.accept('My answer');
});

New Tabs / Popups

// Wait for new tab
const popupPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'Open docs' }).click();
const popup = await popupPromise;
await popup.waitForLoadState();
await expect(popup).toHaveTitle(/Documentation/);

Shadow DOM

// Playwright pierces Shadow DOM automatically!
await page.locator('my-web-component')
  .getByRole('button', { name: 'Click me' }).click();

Tomorrow (Day 11): Visual regression testing — catch UI bugs pixel by pixel.