Test against elements in the Shadow DOM using the shadow locator – MagicPod Help Center

You can perform tests on elements in the Shadow DOM using the shadow locator.

Specify elements in the Shadow DOM

You can add "::shadow" to a CSS locator, such as "div::shadow," to register it as a shadow locator. This allows you to access the Shadow DOM held by that element.

Also,

body > div::shadow > div > a

By accessing the Shadow DOM using "::shadow" and then writing a css locator, you can specify the element in the Shadow DOM that you accessed, and you can perform tests on the specified element. The shadow locator can be described in the same way as the css locator, except that "::shadow" is specified to access the Shadow DOM.

Note:

"::shadow" is different from the deprecated CSS pseudo-element "::shadow." When you use "::shadow" with a shadow locator, it will be interpreted and processed as a MagicPod-specific locator, not as a CSS pseudo-element.

When specifying an element in the Shadow DOM, you must always use "::shadow" to access the Shadow DOM that holds the element to be manipulated.

Example: if you want to test the a tag in the Shadow DOM

(The elements enclosed in "-- Shadow DOM --" are assumed to be held by a 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,

body > div > div > a

or,

body > div a

the shadow locator cannot access the a tag element in the Shadow DOM,

body > div::shadow a

and,

div[class=has_shadow_dom]::shadow > div > a

You must always access the Shadow DOM from the element holding the Shadow DOM containing the element under test, by specifying "::shadow".

Also, in a configuration with multiple nested Shadow DOMs, if the element under test exists within the nested Shadow DOMs, it is necessary to access all the nested Shadow DOMs using "::shadow".

Example: If you want to test the a tag in the nested Shadow DOM

(The element enclosed by "-- Shadow DOM --" is assumed to be 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, the a tag element must be specified after accessing the Shadow DOM of each div element for which the classes 'has_shadow_dom1' and 'has_shadow_dom2' are specified, as follows.

body > div::shadow > div > div::shadow > a

div[class=has_shadow_dom1]::shadow div[class=has_shadow_dom2] a

The following locators do not allow the specification of the a-tag to be tested.

body > div[class=has_shadow_dom1]::shadow a

div[class=has_shadow_dom２]::shadow > a

Limitations:

Shadow DOM in closed mode is not supported.

Specify elements in the Shadow DOM

Related articles