Handling iframes & Shadow DOM

📌 Definition:

📖 Detailed Explanation:

In Selenium you must switchTo().frame(...) before interacting with iframe content and switch back afterward — easy to forget, and a common source of NoSuchElementException. Playwright uses page.frameLocator('iframe#checkout').getByRole('button', ...), scoping into the frame without changing global context, and you can chain further. For shadow DOM, Playwright's engine pierces open shadow roots transparently: getByRole('button', { name: 'Add' }) finds a button inside a web component's open shadow tree without special syntax. Closed shadow roots remain inaccessible (by design, as they are to users). This makes testing embedded widgets (payment iframes, third-party chat, design-system web components) markedly simpler.

🔑 Key Points:

• iframes: page.frameLocator('selector').getByRole(...) — no global context switching
• frameLocator is chainable for nested frames
• Open shadow DOM is pierced automatically by normal locators — no special API
• Closed shadow roots are intentionally inaccessible (same as for real users)
• Eliminates Selenium's switchTo().frame()/defaultContent() bookkeeping

🌍 Real-World Example:

📎 Code Example:

// Interact inside an iframe — no switchTo needed
const card = page.frameLocator('iframe[name="card"]');
await card.getByLabel('Card number').fill('4242424242424242');
await card.getByLabel('Expiry').fill('12/34');

// Nested frames: chain frameLocator
await page
  .frameLocator('#outer')
  .frameLocator('#inner')
  .getByRole('button', { name: 'Confirm' })
  .click();

// Open shadow DOM: normal locators just work
await page.getByRole('button', { name: 'Add to cart' }).click();