Embedded surfaces
Third-party style widgets: two iframes (one of which contains a second iframe), an open shadow root, a closed shadow root, and a deliberately over-nested legacy block.
Invoice preview (single iframe)
Frame name invoice-preview, title
“Invoice preview”, URL frames/invoice-preview.html.
Courier widget (nested iframes)
Frame name courier-widget contains frame name
carrier-feed. Two hops from the main frame.
Open shadow root
A custom element with attachShadow({ mode: 'open' }). Playwright's
locators pierce this automatically.
No rating submitted.
Closed shadow root
A custom element with attachShadow({ mode: 'closed' }).
Nothing inside it is reachable from the page, from querySelector, or from
Playwright. This exists so the lesson on what you cannot pierce has a real example.
Shadow root with slotted light DOM
The card chrome lives in an open shadow root; the heading and body below are ordinary light-DOM children projected into slots.
Reorder threshold breached
Halcyon Burr Grinder is below its reorder point.
Legacy nesting
Deliberately hostile. Twelve levels of meaningless
<div> wrappers with no roles, no test ids, and class names that look
auto-generated. Structural CSS chains through this will break; role and text will not.