Shadow DOM

Find Elements inside Shadow DOM by prefixing a CSS Selector with >>>.

Some controls live inside a Shadow DOM: a nested DOM tree that the page keeps separate from the main document. Ordinary CSS Selectors stay outside that tree, so DoesQA cannot find the control until the Selector is told to look inside.

Use this when you can see the control in the browser, but a Manual CSS Selector for the same tag or class finds nothing during a Run.

Prefix the CSS Selector with >>>

For a Manual Element with Type set to CSS, put >>> at the start of the Selector. That tells DoesQA to pierce into Shadow DOM, then match the rest of the CSS as usual.

Without Shadow DOM	With Shadow DOM
h1.main-title	>>>h1.main-title
button.submit	>>>button.submit
input[name="email"]	>>>input[name="email"]

Keep the part after >>> as tight as any other durable CSS Selector: prefer a stable class, attribute, or structure, not a large layout wrapper. See Choose durable selectors.

Set it on a Manual Element

1

Open the Element

Open the Element from Assets → Elements, or edit it from the Test Step that uses it.

2

Use Manual CSS

Set Element configuration to Manual, then set Type to CSS.

3

Add the >>> prefix

In Selector, start with >>>, then the CSS that identifies the control inside the Shadow DOM. Save the Element, then run the Flow again.

Pro tip: Confirm the control is inside Shadow DOM in the browser developer tools before you change the Selector. Expand the host element until you see #shadow-root, then copy a tight CSS path from inside that tree and prefix it with >>>.

Related

• CSS

• Selector Types

• Creating Elements

• Choose durable selectors