TESTHEON Practice Lab
AdvancedPW-SHD-00540 minutesPlaywright

Verify the closed Shadow DOM boundary

A real closed root renders internal content while intentionally withholding it from page JavaScript and locator traversal.

  • shadow-dom
  • assertions
  • debugging

Objective

What to automate

Assert the closed host contract, prove its public shadowRoot is null, and prove a scoped button locator finds no internal control.

Preconditions and test data

Preconditions

  • Use a fresh isolated Practice Lab browser context.
  • Open the fixture identified by FX-SHD-001.

Test data

  • host test id: closed-shadow-host
  • data-shadow-root: closed

Expected result

The documented host remains observable, while the internal button remains inaccessible to page JavaScript and Playwright locators.

Open practice pageRead related guide

Progressive hints

Hint 1

Start with the closed host and its data-shadow-root attribute.

Hint 2

Evaluate only the public host shadowRoot property.

Hint 3

Assert zero scoped buttons rather than attempting to click the internal control.

I’ve tried it — show solution
  1. Start with the closed host and its data-shadow-root attribute.
  2. Evaluate only the public host shadowRoot property.
  3. Assert zero scoped buttons rather than attempting to click the internal control.

The deliberately failing starter is in tests/shadow-dom.spec.ts inside the TypeScript starter ZIP.