TESTHEON Practice Lab
IntermediatePW-SHD-00425 minutesPlaywright

Act through nested open Shadow DOM roots

An outer component contains a second component, and both expose open roots.

  • locators
  • shadow-dom
  • assertions

Objective

What to automate

Activate Run nested shadow action and assert the inner result.

Preconditions and test data

Preconditions

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

Test data

  • button name: Run nested shadow action

Expected result

The nested-root live result reads Nested shadow action completed.

Open practice pageRead related guide

Progressive hints

Hint 1

Use the inner control’s accessible name.

Hint 2

Keep the assertion tied to Nested shadow result.

Hint 3

Avoid a fragile chain of implementation-specific selectors.

I’ve tried it — show solution
  1. Use the inner control’s accessible name.
  2. Keep the assertion tied to Nested shadow result.
  3. Avoid a fragile chain of implementation-specific selectors.

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