Testing Shadow DOM Elements with Playwright

 Testing Shadow DOM elements with Playwright can be challenging if you're not familiar with how the Shadow DOM works, but Playwright provides powerful tools to help you interact with it effectively.

✅ What is the Shadow DOM?

The Shadow DOM is a web standard used to encapsulate DOM elements and styles so that they are hidden from the main document DOM. It's commonly used in Web Components.

Example:

html

Copy

Edit

<custom-element></custom-element>

<!-- Inside shadow DOM -->

<div class="inside-shadow">Hello</div>

Standard selectors like document.querySelector do not access Shadow DOM content unless you explicitly navigate into it.

🎯 How Playwright Helps

Playwright supports querying and interacting with Shadow DOM elements using:

✅ 1. Pierce Selector (>>>)

The >>> combinator allows you to pierce through shadow roots.

✅ Example:

Suppose this is your web component:

html

Copy

Edit

<my-component>

  #shadow-root

    <button id="submitBtn">Submit</button>

</my-component>

✅ Playwright Code (JavaScript/TypeScript):

javascript

Copy

Edit

const { test, expect } = require('@playwright/test');

test('Click button inside shadow DOM', async ({ page }) => {

  await page.goto('https://example.com');

  // Use the "pierce" selector (>>>)

  const shadowButton = page.locator('my-component >>> button#submitBtn');

  await shadowButton.click();

  await expect(shadowButton).toHaveText('Submit');

});

🧠 Alternate Methods

🔹 Use evaluateHandle() for Custom Access

If the >>> selector doesn’t work due to deeply nested shadow roots, you can use JavaScript evaluation:

javascript

Copy

Edit

const shadowButton = await page.evaluateHandle(() => {

  const el = document.querySelector('my-component');

  return el.shadowRoot.querySelector('#submitBtn');

});

await shadowButton.click();

Best used when dealing with deeply nested or dynamic shadow elements.

🔍 Tips for Working with Shadow DOM in Playwright

Tip Description

Use >>> Best for shallow Shadow DOMs

Use evaluateHandle() For complex, deeply nested structures

Wait for elements Shadow DOM elements may load late, use await locator.waitFor()

Inspect using DevTools Right-click > "Inspect Shadow DOM" to understand structure

Test component isolation Verify that styles/scripts don’t leak out/in

🧪 Full Example

javascript

Copy

Edit

test('Interact with Shadow DOM input', async ({ page }) => {

  await page.goto('https://example-shadow-page.com');

  const input = page.locator('custom-input >>> input');

  await input.fill('Playwright');

  await expect(input).toHaveValue('Playwright');

});

✅ Summary

Task Method

Select Shadow DOM element locator('host >>> element')

Access deeply nested shadow DOM evaluateHandle()

Wait for element inside shadow DOM await locator.waitFor()

Click, fill, assert Use click(), fill(), expect() on locators

Learn Playwright Training Course in Hyderabad

Read More

Writing Custom Reporters in Playwright

Using Playwright for Mobile Web Testing

Custom Helpers and Utilities in Playwright

Visual Regression Testing with Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions