Shadow DOM

Access shadow DOM elements

What you will learn

Pierce shadow roots with evaluate() or framework-specific shadow-dom locators
Understand why CSS selectors don't cross shadow boundaries — and what does
Test both open and closed shadow roots without coupling to implementation details

Basic Shadow DOM

Interact with elements inside shadow root

Shadow DOM with Form

Form elements encapsulated in shadow DOM

Nested Shadow DOM

Shadow root inside another shadow root

Automation Tips

How to interact with Shadow DOM

Playwright: page.locator('#shadow-host').locator('#shadow-button') — Playwright pierces shadow DOM automatically. The older >> piercing operator still works but is no longer required.

Cypress: Enable shadow-DOM mode per call — cy.get('#shadow-host').shadow().find('#shadow-button'). Or globally via Cypress.config('includeShadowDom', true).

Selenide (Java): $("#shadow-host").shadowRoot().$("#shadow-button").click() — fluent API for nested roots.

WebdriverIO: $('#shadow-host').shadow$('#shadow-button') for single element, shadow$$ for lists.

Common pitfalls

Closed shadow roots (mode: 'closed') — no framework can reach into these; the test must talk to the host's public API instead.
Nested shadow roots — chain the selectors (.shadow().shadow()), don't try to write a single deep selector string.
XPath doesn't cross the shadow boundary in any major tool — prefer CSS selectors everywhere under the root.
Styles and events behave normally across the boundary, so keyboard-focus, hover and scroll assertions work on shadow elements like any others.

Related Challenges

Shadow DOM

Access shadow DOM elements

What you will learn

Pierce shadow roots with evaluate() or framework-specific shadow-dom locators
Understand why CSS selectors don't cross shadow boundaries — and what does
Test both open and closed shadow roots without coupling to implementation details

Basic Shadow DOM

Interact with elements inside shadow root

Shadow DOM with Form

Form elements encapsulated in shadow DOM

Nested Shadow DOM

Shadow root inside another shadow root

Automation Tips

How to interact with Shadow DOM

Playwright: page.locator('#shadow-host').locator('#shadow-button') — Playwright pierces shadow DOM automatically. The older >> piercing operator still works but is no longer required.

Cypress: Enable shadow-DOM mode per call — cy.get('#shadow-host').shadow().find('#shadow-button'). Or globally via Cypress.config('includeShadowDom', true).

Selenide (Java): $("#shadow-host").shadowRoot().$("#shadow-button").click() — fluent API for nested roots.

WebdriverIO: $('#shadow-host').shadow$('#shadow-button') for single element, shadow$$ for lists.

Common pitfalls

Closed shadow roots (mode: 'closed') — no framework can reach into these; the test must talk to the host's public API instead.
Nested shadow roots — chain the selectors (.shadow().shadow()), don't try to write a single deep selector string.
XPath doesn't cross the shadow boundary in any major tool — prefer CSS selectors everywhere under the root.
Styles and events behave normally across the boundary, so keyboard-focus, hover and scroll assertions work on shadow elements like any others.

Related Challenges

iFrames

Hard

Drag & Drop

Hard

Canvas Drawing

Hard

Shadow DOM

What you will learn

Basic Shadow DOM

Shadow DOM with Form

Nested Shadow DOM

Automation Tips

Timer

Need Help?

Related Challenges

iFrames

Drag & Drop

Canvas Drawing

Shadow DOM

What you will learn

Basic Shadow DOM

Shadow DOM with Form

Nested Shadow DOM

Automation Tips

Timer

Need Help?

Related Challenges

iFrames

Drag & Drop

Canvas Drawing