The SDET Playbook

← All questions

How do I handle iframes, shadow DOM and multiple tabs in UI tests?

Asked Sep 28, 2026Viewed 1 time

1 Answer

Sign in to answer and to vote.

  • 0
    The SDET PlaybookSep 28, 2026

    In Playwright, use frameLocator to enter an iframe and locate elements inside it; frame locators are strict, so they throw if several frames match. Playwright's locators pierce open shadow DOM without extra code (XPath is the exception), and new tabs or popups are captured by waiting for the context's page event instead of juggling window handles. In Selenium you switch context explicitly for frames and windows, and it also has a shadow-root API, so plan for those context switches in page objects. Closed shadow roots and cross-origin restrictions still need special handling or a test hook.

    For example, filling a field inside an iframe, and catching a tab or popup opened by a click:

    const frame = page.frameLocator('iframe#payment-gate');
    await frame.locator('input#card-number').fill('4242424242424242');
    
    const popupPromise = page.waitForEvent('popup');
    await page.getByRole('button', { name: 'Sign in with Google' }).click();
    const popup = await popupPromise;
    await popup.waitForLoadState();
    

    Start waiting for the popup before the click, or the event can fire before you listen for it.

    Sources: Playwright FrameLocator, Playwright locators and shadow DOM, Playwright pages and popups, Selenium docs