QA PRACTICE•IFRAMES SHADOW DOM
Advanced locator lab
Practice the boundaries that make real-world UI automation different: browsing contexts, nested frames, postMessage, and component encapsulation.
Enter the nested support message and verify that the parent counter receives the frame event.
Nested support iframe
Nested frame submissions received by parent: 0
Locate and interact with a control inside an open Shadow DOM root.
The button below lives inside an open shadow root. Playwright pierces these by default.
iFrame: switch with frameLocator() before locating nested controls.
Nested frame: keep the parent and child context explicit in the test.
Shadow DOM: open roots are pierceable by Playwright; closed roots require a testability decision.
Test cases · 10 scenarios
Switch to a same-origin frame and click the nested action.
Do this: Locate the iframe by title and click the button inside it.
Expected: The nested result becomes visible in the parent status area.
frameLocator('iframe[title=Support]').getByRole('button', { name: 'Send' })Use two frame boundaries and verify a parent counter event.
Do this: Submit the nested support widget and observe the parent counter.
Expected: The parent receives one message and increments the counter once.
frameLocator('#parent-frame').frameLocator('#nested-frame').getByTestId('frame-submit')Compare same-origin srcdoc access with a cross-origin document.
Do this: Attempt DOM access and document why the cross-origin frame is isolated.
Expected: The test uses frame context or an agreed postMessage/API contract; it does not bypass browser security.
page.frameLocator('iframe[title=External payment]')Wait for a delayed frame, changing src, and replacement.
Do this: Recover from a Frame was detached event after a re-render.
Expected: The locator resolves the current frame and avoids stale frame handles.
page.frameLocator('[data-testid=dynamic-frame]').getByRole('button')Compare id, name, title, index, and meaningful accessibility metadata.
Do this: Select the intended frame with a meaningful title.
Expected: The frame has a stable selector and an informative title attribute.
page.frameLocator('iframe[title=QA support widget]')Interact with a button, input, counter, and list inside an open root.
Do this: Increment the counter inside the open component.
Expected: The count changes and the component remains keyboard reachable.
page.getByTestId('shadow-host').getByRole('button', { name: /Increment/ })Locate through a host containing another custom element with its own root.
Do this: Traverse both component boundaries and assert the nested label.
Expected: The locator resolves the nested component without document-wide selectors.
page.locator('qa-shell').locator('qa-card').getByRole('heading')Understand why the root is inaccessible and choose a testability contract.
Do this: Confirm direct DOM traversal fails, then use an exposed API or host-level hook.
Expected: The test does not attempt to pierce a closed root with XPath.
page.getByTestId('closed-component')Switch context first, then locate the web component inside the frame.
Do this: Find the open component after entering the iframe.
Expected: Frame and shadow boundaries are handled as separate steps.
frameLocator('#component-frame').locator('qa-player').getByRole('button')Distinguish light DOM slotted content from shadow-owned controls.
Do this: Assert slotted text and click the component’s internal action.
Expected: The test identifies which node belongs to light DOM and which belongs to shadow DOM.
page.locator('qa-card').getByText('Release quality')| Error | What to check |
|---|---|
| NoSuchElementException | Frame context was not selected before searching for the nested element. |
| stale element reference | The frame/component re-rendered; resolve the locator again instead of reusing a handle. |
| Frame was detached | Wait for the current frame and retry through frameLocator after replacement. |
| strict mode violation | Add a frame title, host scope, accessible name, or filter. |
| XPath cannot pierce Shadow DOM | Use the component host/API or an automation tool’s shadow-aware locator. |
| cross-origin access error | Use frame context plus a supported contract; browser same-origin policy cannot be bypassed. |