TESTHEON Practice Lab
BeginnerPW-SHD-00115 minutesPlaywright

Activate an open Shadow DOM control

A component keeps its control in an open shadow root while exposing a stable accessible name.

  • locators
  • shadow-dom
  • accessibility

Objective

What to automate

Activate Trigger open shadow action and assert the named 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: Trigger open shadow action

Expected result

The open-root live result reads Open shadow action completed.

Open practice pageRead related guide

Progressive hints

Hint 1

Locate the control by role and accessible name.

Hint 2

Use a web-first assertion for the named status region.

Hint 3

Do not depend on the component implementation or CSS classes.

I’ve tried it — show solution
  1. Locate the control by role and accessible name.
  2. Use a web-first assertion for the named status region.
  3. Do not depend on the component implementation or CSS classes.

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