You can test elements within the Shadow DOM by using either XPath locators or shadow locators.
Specify elements within the Shadow DOM using XPath locators
Add the path "/#shadow-root" to the XPath locator, like "//div/#shadow-root", to register it as an XPath locator, thus allowing you to access the Shadow DOM held by that element.
Example:
//body/div/#shadow-root/div/a
By accessing the Shadow DOM using "/#shadow-root" and then writing an XPath locator, you can specify an element within the accessed Shadow DOM and perform tests on that specified element.
Specify Elements within the Shadow DOM using shadow locators
Add "::shadow" to the CSS locator, like "div::shadow", to register it as a shadow locator, thus allowing you to access the Shadow DOM held by that element.
Example:
body > div::shadow > div > a
By accessing the Shadow DOM using "::shadow" and then writing a CSS locator, you can specify an element within the accessed Shadow DOM and perform tests on that specified element.
Using shadow locators, you can write the locator in the same way as with CSS locators, except you use "::shadow" to access the Shadow DOM.
Note:
"::shadow" is different from the obsolete CSS pseudo-element "::shadow". Therefore, when using "::shadow" with shadow locators, it is processed as a unique locator specific to MagicPod, not as a CSS pseudo-element.
Example 1: Test an "a" tag within the Shadow DOM
To specify an element within the Shadow DOM, you must first access the Shadow DOM containing the target element.
(Elements enclosed in "-- Shadow DOM --" are considered to be within the Shadow DOM held by the div element one level above)
<body>
<div class="has_shadow_dom">
-- Shadow DOM --
<div>
<a>Target 'a' tag for testing</a>
</div>
-- Shadow DOM --
</div>
</body>
In this case, neither the following XPath locators:
//body/div/div/a
//body/div//a
nor the following shadow locators:
body > div > div > a
body > div a
can access the "a" tag element within the Shadow DOM.
To access the "a" tag element within the Shadow DOM, you can use one of the following methods:
Using XPath locators
You must first access the Shadow DOM that contains the test target element by specifying "/#shadow-root".
//body/div/#shadow-root/div/a
//div[@class='has_shadow_dom']/#shadow-root/a
Using shadow locators
You must first access the Shadow DOM that contains the test target element by specifying "::shadow".
body > div::shadow a
div[class=has_shadow_dom]::shadow > div > a
Example 2: Test an "a" tag within nested Shadow DOMs
If your test target element exists within a nested Shadow DOM structure, you must access each nested Shadow DOM using "/#shadow-root" or "::shadow" to reach your target element.
(Elements enclosed in "-- Shadow DOM --" are considered to be within the Shadow DOM held by the div element one level above)
<body>
<div class=has_shadow_dom1>
-- Shadow DOM --
<div>
<div class=has_shadow_dom2>
-- Shadow DOM --
<a>Target 'a' tag for testing</a>
-- Shadow DOM --
</div>
</div>
-- Shadow DOM --
</div>
</body>
In this case, you must first access each Shadow DOM held by the div elements with classes "has_shadow_dom1" and "has_shadow_dom2", and then specify the a tag element:
Using XPath locators
//body/div/#shadow-root/div/div/#shadow-root/a
//div[@class='[class=has_shadow_dom1]']/div/div/#shadow-root/a
Using shadow locators
body > div::shadow > div > div::shadow > a
div[class=has_shadow_dom1]::shadow div[class=has_shadow_dom2] a
The following locators cannot specify the test target "a" tag in the above nested Shadow DOMs:
//body/div/#shadow-root/div//a
//div[@class='[class=has_shadow_dom２]']/a
body > div[class=has_shadow_dom1]::shadow a
div[class=has_shadow_dom２]::shadow > a
Limitations
- Closed mode Shadow DOM is not supported.
- When using XPath locators, you cannot use axes or "//" immediately after "/#shadow-root".
- Examples:
- //body/div/#shadow-root/parent::div (using axes immediately after "/#shadow-root")
- //body/div/#shadow-root//div (using "//" immediately after "/#shadow-root")
- Examples: