Selenium / Quiz
Shadow DOM: Breaking Into Web Components
The element is right there in devtools, under a #shadow-root, and your locator returns nothing. Web components need their own break-in techniques.
- Difficulty
- Hard
- Format
- Quiz
- Points
- 200
- Estimate
- 9 min
// MISSION BRIEF
Your Mission
The design-system team rebuilt every form control as web components. Overnight, forty locators went blind: the inputs live inside shadow roots now.
Six questions on piercing shadow DOM with Selenium 4: getShadowRoot, its limits, and how it differs from iframe switching. Speed bonus active.
// FIRST CONTACT
Battle teaser
driver.findElement can see <fancy-input> but not the <input> nested under its #shadow-root (open). Why?
- ASelenium only reads the first 1000 DOM nodes
- BWeb components require Firefox
- CThe input has no id attribute
- DShadow DOM is encapsulated: document-level queries do not descend into shadow trees, that is the feature, not a bug
Answers, scoring, hints, and the full battle stay sealed.
// SKILL TAGS
seleniumshadow-domweb-componentslocatorsselenium4