Frames & Shadow DOM
Practice interacting with isolated contexts like iframes, shadow DOMs, and new windows.
1. Browser Windows
2. Frames (iframe)
Challenge Tasks (2)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
To interact with elements inside, you must switch context to the frame first.
3. Shadow DOM
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
About this Frames & Shadow DOM page
An iframe is a separate document embedded in a page, and a shadow DOM is an encapsulated element tree attached to a host element. Test tools cannot see inside either by default. To automate them, switch to the frame first (switchTo().frame in Selenium, frameLocator in Playwright), then locate shadow content with a shadow root API or a piercing selector.
Frequently asked questions
How do I switch to an iframe in Selenium?
Call driver.switchTo().frame() with an index, a name or id, or the iframe WebElement. Locate elements inside it as usual, then return with switchTo().defaultContent(). Forgetting to switch back is the most common cause of NoSuchElementException on the main page.
How do I handle an iframe in Playwright?
Use page.frameLocator('iframe#id') and chain locators from it, for example frameLocator('#pay').getByRole('button'). Playwright waits for the frame and auto-waits for elements, so no manual switching or switching back is needed.
How do I find elements inside a shadow DOM in Selenium 4?
Find the shadow host, call getShadowRoot() on it (Java) or shadow_root (Python), then use findElement with a CSS selector on that root. XPath does not work inside shadow roots. For nested roots, repeat the step per host.
Does Playwright pierce shadow DOM automatically?
Yes. Playwright CSS and role-based locators such as getByRole, getByText and locator('css') pass through open shadow roots at any depth. XPath selectors do not pierce them, so prefer CSS or user-facing locators.
How do I test an iframe or shadow DOM in Cypress?
Cypress has no built-in frame switching. Read the iframe body from its contentDocument and wrap it, or use a plugin. For shadow DOM, pass { includeShadowDom: true } to cy.get or set it in config so selectors pierce open roots.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: