TESTHEON Practice Lab
IntermediatePW-SHD-00325 minutesPlaywright

Submit a form inside an open Shadow DOM root

A profile form has an accessible label and live result inside an open shadow root.

  • forms
  • shadow-dom
  • accessibility

Objective

What to automate

Fill Shadow profile name with Asha Learner, submit, 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

  • name: Asha Learner

Expected result

The form reports Shadow profile saved: Asha Learner.

Open practice pageRead related guide

Progressive hints

Hint 1

Use getByLabel for Shadow profile name.

Hint 2

Submit with the visible button name.

Hint 3

Assert the role=status result instead of reading internal implementation state.

I’ve tried it — show solution
  1. Use getByLabel for Shadow profile name.
  2. Submit with the visible button name.
  3. Assert the role=status result instead of reading internal implementation state.

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