Testing / Playwright Interview questions
How does Playwright handle elements inside Shadow DOM?
Unlike many older tools that require manually piercing each shadow root, Playwright's built-in locators (getByRole, getByText, page.locator() with CSS) automatically pierce open shadow roots by default, treating shadow DOM content as if it were part of the regular document.
// Works even if #my-widget contains a shadow root internally await page.locator('#my-widget').getByRole('button', { name: 'Save' }).click();
This works because Playwright's selector engine was built shadow-DOM-aware from the start, rather than bolting piercing support on afterward - a plain CSS selector like custom-element >> button resolves into the shadow tree automatically. The one limitation is closed shadow roots, which JavaScript itself cannot reach from outside by design; Playwright can't pierce those either, since doing so would require violating the same browser-level encapsulation that keeps closed shadow DOM inaccessible to any script.
More Related questions...
