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.