Shadow DOM element access in Selenium Java - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the shadow root of a web element.

Selenium Java

WebElement host = driver.findElement(By.cssSelector("custom-element"));
SearchContext shadowRoot = host.[1]();

Drag options to blanks, or click blank then click option'

AgetShadow

BgetShadowRootElement

CgetShadowDom

DshadowRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using getShadowDom() or getShadow() which do not exist.

Trying to access shadow root directly without calling a method.

The method shadowRoot() is used in Selenium Java to access the shadow root of a shadow host element.

2fill in blank

medium

Complete the code to find an element inside the shadow root.

Selenium Java

WebElement host = driver.findElement(By.cssSelector("custom-element"));
SearchContext shadowRoot = host.shadowRoot();
WebElement innerElement = shadowRoot.[1](By.cssSelector("button.submit"));

Drag options to blanks, or click blank then click option'

AfindElement

BfindElements

CgetElement

DquerySelector

Attempts:

3 left

💡 Hint

Common Mistakes

Using findElements which returns a list instead of a single element.

Using querySelector which is not a Selenium method.

Inside the shadow root, findElement(By) is used to locate a single element.

3fill in blank

hard

Fix the error in accessing a shadow DOM element by completing the code.

Selenium Java

WebElement host = driver.findElement(By.cssSelector("custom-element"));
WebElement innerElement = host.[1]().findElement(By.cssSelector("button.submit"));

Drag options to blanks, or click blank then click option'

AfindElement

BfindElements

CshadowRoot

DgetShadowRootElement

Attempts:

3 left

💡 Hint

Common Mistakes

Calling findElement directly on the shadow host for shadow DOM elements.

Using getShadowRootElement which is not a valid method.

You must first get the shadow root using shadowRoot() before finding elements inside it.

4fill in blank

hard

Fill both blanks to correctly access a nested shadow DOM element.

Selenium Java

WebElement host = driver.findElement(By.cssSelector("outer-element"));
SearchContext outerShadow = host.[1]();
WebElement innerHost = outerShadow.findElement(By.cssSelector("inner-element"));
SearchContext innerShadow = innerHost.[2]();

Drag options to blanks, or click blank then click option'

AshadowRoot

BfindElement

CgetShadowRootElement

DgetShadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using findElement instead of shadowRoot for the second blank.

Using getShadowRootElement which is not a valid method.

To access nested shadow DOMs, you call shadowRoot() on each shadow host element.

5fill in blank

hard

Fill all three blanks to find a button inside a nested shadow DOM and click it.

Selenium Java

WebElement host = driver.findElement(By.cssSelector("outer-element"));
SearchContext outerShadow = host.[1]();
WebElement innerHost = outerShadow.findElement(By.cssSelector("inner-element"));
SearchContext innerShadow = innerHost.[2]();
WebElement button = innerShadow.[3](By.cssSelector("button.submit"));
button.click();

Drag options to blanks, or click blank then click option'

AshadowRoot

BfindElement

CclickElement

DgetShadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using clickElement instead of findElement to get the button.

Using getShadow instead of shadowRoot for shadow roots.

You get shadow roots for outer and inner hosts, then find the button element before clicking it.

Practice

1. What is the main reason we need special methods to access elements inside a Shadow DOM in Selenium Java?

easy

A. Because Shadow DOM elements are hidden inside a separate DOM tree and not directly accessible.

B. Because Shadow DOM elements use a different programming language.

C. Because Shadow DOM elements are only visible on mobile browsers.

D. Because Shadow DOM elements are deprecated and not supported.

Solution

1. Step 1: Understand Shadow DOM structure

   Shadow DOM creates a separate DOM tree inside a host element, hiding its internals from the main DOM.

2. Step 2: Recognize access limitation

   Normal Selenium methods cannot directly access elements inside this hidden tree, so special methods are needed.

3. Final Answer:

   Because Shadow DOM elements are hidden inside a separate DOM tree and not directly accessible. -> Option A

4. Quick Check:

   Shadow DOM hides elements = Need special access [OK]

Hint: Shadow DOM hides elements inside separate tree [OK]

Common Mistakes:

• Thinking Shadow DOM uses a different language
• Assuming Shadow DOM elements are deprecated
• Believing Shadow DOM is only for mobile

2. Which Selenium Java code snippet correctly accesses a button inside a Shadow DOM hosted by an element with id 'shadowHost'?

easy

A. WebElement button = driver.findElement(By.id("shadowHost")).findElement(By.tagName("button"));

B. WebElement host = driver.findElement(By.id("shadowHost"));
WebElement shadowRoot = host.getShadowRoot();
WebElement button = shadowRoot.findElement(By.cssSelector("button"));

C. WebElement button = driver.findElement(By.cssSelector("#shadowHost button"));

D. WebElement button = driver.getShadowRoot().findElement(By.cssSelector("button"));

Solution

1. Step 1: Find the shadow host element

   Use driver.findElement(By.id("shadowHost")) to get the host element.

2. Step 2: Access the shadow root and find the button

   Call getShadowRoot() on the host, then find the button inside the shadow root.

3. Final Answer:

   Use getShadowRoot() on host, then findElement inside shadow root. -> Option B

4. Quick Check:

   Shadow root access = getShadowRoot() then findElement [OK]

Hint: Use getShadowRoot() on host before findElement inside [OK]

Common Mistakes:

• Trying to find shadow elements directly from driver
• Calling getShadowRoot() on driver instead of host
• Using nested findElement without shadow root

3. Given the code below, what will be the output if the button inside the Shadow DOM has text 'Click Me'?

WebElement host = driver.findElement(By.id("shadowHost"));
WebElement shadowRoot = host.getShadowRoot();
WebElement button = shadowRoot.findElement(By.cssSelector("button"));
System.out.println(button.getText());

medium

A. Click Me

B. NoSuchElementException

C. null

D. shadowHost

Solution

1. Step 1: Access shadow host and shadow root

   The code correctly finds the shadow host and calls getShadowRoot() to access the Shadow DOM.

2. Step 2: Find button and get its text

   The button inside the Shadow DOM is found by CSS selector and getText() returns its visible text 'Click Me'.

3. Final Answer:

   Click Me -> Option A

4. Quick Check:

   Correct shadow DOM access = button text output [OK]

Hint: getShadowRoot() then findElement returns correct element [OK]

Common Mistakes:

• Expecting NoSuchElementException without shadow root access
• Assuming getText() returns null
• Confusing shadow host text with shadow element text

4. What is wrong with the following Selenium Java code trying to click a button inside Shadow DOM?

WebElement button = driver.findElement(By.cssSelector("#shadowHost button"));
button.click();

medium

A. driver.findElement cannot find elements by CSS selector.

B. The CSS selector is invalid syntax.

C. The button element cannot be clicked inside Shadow DOM.

D. It tries to find the button directly without accessing the shadow root first.

Solution

1. Step 1: Analyze element access method

   The code tries to find the button inside Shadow DOM directly from driver using a combined CSS selector.

2. Step 2: Identify Shadow DOM access requirement

   Shadow DOM elements require accessing the shadow root via getShadowRoot() on the host element before finding inner elements.

3. Final Answer:

   It tries to find the button directly without accessing the shadow root first. -> Option D

4. Quick Check:

   Shadow DOM needs getShadowRoot() before findElement [OK]

Hint: Always getShadowRoot() before accessing shadow elements [OK]

Common Mistakes:

• Using combined CSS selector ignoring shadow root
• Thinking CSS selector alone works inside Shadow DOM
• Assuming button cannot be clicked inside Shadow DOM

5. You need to click a nested button inside two levels of Shadow DOM. The outer shadow host has id 'outerHost', and inside it, the inner shadow host has id 'innerHost'. Which code correctly clicks the button inside the inner Shadow DOM?

hard

A. WebElement innerHost = driver.findElement(By.id("innerHost"));
WebElement button = innerHost.getShadowRoot().findElement(By.cssSelector("button"));
button.click();

B. WebElement button = driver.findElement(By.cssSelector("#outerHost #innerHost button"));
button.click();

C. WebElement outerHost = driver.findElement(By.id("outerHost"));
WebElement outerShadow = outerHost.getShadowRoot();
WebElement innerHost = outerShadow.findElement(By.id("innerHost"));
WebElement innerShadow = innerHost.getShadowRoot();
WebElement button = innerShadow.findElement(By.cssSelector("button"));
button.click();

D. WebElement outerHost = driver.findElement(By.id("outerHost"));
WebElement button = outerHost.getShadowRoot().findElement(By.cssSelector("#innerHost button"));
button.click();

Solution

1. Step 1: Access outer shadow root

   Find the outer host by id and call getShadowRoot() to access its Shadow DOM.

2. Step 2: Access inner shadow root

   Inside the outer shadow root, find the inner host element, then call getShadowRoot() again to access the inner Shadow DOM.

3. Step 3: Find and click the button

   Inside the inner shadow root, find the button and call click() on it.

4. Final Answer:

   Access each shadow root step-by-step before finding nested elements. -> Option C

5. Quick Check:

   Nested Shadow DOM requires chained getShadowRoot() calls [OK]

Hint: Chain getShadowRoot() calls for nested Shadow DOM [OK]

Common Mistakes:

• Trying to find nested shadow elements directly from driver
• Skipping inner shadow root access
• Using combined CSS selectors ignoring Shadow DOM