TESTHEON Practice Lab
ExpertPW-SHD-00660 minutesPlaywright

Author a truthful Shadow DOM contract test

A durable test suite must distinguish accessible open-root behavior from a closed-root boundary instead of promising unsupported piercing.

  • shadow-dom
  • accessibility
  • debugging
  • locators

Objective

What to automate

Write one spec that exercises the open action and shadow form, then asserts the closed host boundary without reaching for its internal button.

Preconditions and test data

Preconditions

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

Test data

  • open action
  • shadow form name: Asha Learner
  • closed host: closed-shadow-host

Expected result

The spec passes through open roots and proves the closed root exposes no public shadowRoot or scoped internal button.

Open practice pageRead related guide

Progressive hints

Hint 1

Use accessible locators for open-root interactions.

Hint 2

Assert the visible status outcomes before checking the boundary.

Hint 3

Treat the closed host attributes as the contract, not its internal markup.

I’ve tried it — show solution
  1. Use accessible locators for open-root interactions.
  2. Assert the visible status outcomes before checking the boundary.
  3. Treat the closed host attributes as the contract, not its internal markup.

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