Getting elements within shadowroots using Powershell and Selenium C# Webdriver

DSC
1

I am trying to automate clicks in a chrome browser using Powershell and Selenium. So far, I have managed to click elements within the body of the html file - sample below.

HTML

<label for="cars">Choose a car:</label>

<select name="cars" id="cars" class="dropdownContent">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

Powershell

$ChromeDriver.FindElementByXPath('//*[@id="cars"]/option[3]').Click()

Using the script above will click the 3rd option that resides within the select element (in this case, “Mercedes”).

However, I am struggling in manipulating elements inside Shadow roots, i can’t seems to access any elements inside it, what makes it worse is that the element that I would like to click on resides within child shadow roots, as seen in the image below:

HTML

<mds-select class="col-md-3 link-section mds-select--cpo" id="linkCategoryId">
<!--1st Shadow Root, open-->
    <div class="mds-select__label-wrap">
        <label class="mds-select__label mds-select__label--box" id="select-linkCategoryId-label">Object</label>
    </div>
    <div class="mds-select__select-wrap mds-select__select-wrap--vertical-label">
        <div class="mds-select__menu mds-select__menu--hidden">
            <div class="mds-select__menu-list">
                <mds-select-option data-index="0" data-setsize="6" value="Monkey" label="Monkey" selected="false" data-accessible-text-cardinality-separator="of" inactive="false" class="mds-select-option--cpo">
                <!--2nd Shadow Root within, open-->
                
                    <div class="option option--hidden" tabindex="-1" role="option" aria-disabled="false" aria-posinset="1" aria-setsize="6">
                        <div class="option__label">
                            <span class="option__accessible-text">Monkey</span>
                            <span class="option__label-primary" aria-hidden="true">Monkey</span>
                            <div class="option__slot-container" aria-hidden="true">
                                <slot></slot>
                            </div>
                        </div>
                    </div>
                
                </mds-select-option>
                
                <mds-select-option data-index="1" data-setsize="6" value="Mochi" label="Mochi" selected="false" data-accessible-text-cardinality-separator="of" inactive="false" class="mds-select-option--cpo">
                <!--2nd Shadow Root within, open-->
                
                    <div class="option option--hidden" tabindex="-1" role="option" aria-disabled="false" aria-posinset="1" aria-setsize="6">
                        <div class="option__label">
                            <span class="option__accessible-text">Mochi</span>
                            <span class="option__label-primary" aria-hidden="true">Mochi</span>
                            <div class="option__slot-container" aria-hidden="true">
                                <slot></slot>
                            </div>
                        </div>
                    </div>
                
                </mds-select-option>
            </div>
        </div>
    </div>
</mds-select>

Specifically, i would like to click on “Monkey”

I tried using xpath “$ChromeDriver. FindElementByXPath (‘//*[@id=“linkCategoryId”]//div/div2/div/div/div/mds-select-option1’).Click()”

but I’m just getting an error log that says “Unable to locate element”:

I would greatly appreciate if someone can help me, provide tips, or point me in the right direction.

2

Personally use dot notation more than XPath as it allow me to just quickly walk the path to get to the data. Once that is done, it looks like there are two extra divs in the path and the 1 should have square brackets:

[xml]$test = @"
<html>
    <head>
    </head>
    <body>
        <mds-select class="col-md-3 link-section mds-select--cpo" id="linkCategoryId">
        <!--1st Shadow Root, open-->
            <div class="mds-select__label-wrap">
                <label class="mds-select__label mds-select__label--box" id="select-linkCategoryId-label">Object</label>
            </div>
            <div class="mds-select__select-wrap mds-select__select-wrap--vertical-label">
                <div class="mds-select__menu mds-select__menu--hidden">
                    <div class="mds-select__menu-list">
                        <mds-select-option data-index="0" data-setsize="6" value="Monkey" label="Monkey" selected="false" data-accessible-text-cardinality-separator="of" inactive="false" class="mds-select-option--cpo">
                        <!--2nd Shadow Root within, open-->
                        
                            <div class="option option--hidden" tabindex="-1" role="option" aria-disabled="false" aria-posinset="1" aria-setsize="6">
                                <div class="option__label">
                                    <span class="option__accessible-text">Monkey</span>
                                    <span class="option__label-primary" aria-hidden="true">Monkey</span>
                                    <div class="option__slot-container" aria-hidden="true">
                                        <slot></slot>
                                    </div>
                                </div>
                            </div>
                        
                        </mds-select-option>
                        
                        <mds-select-option data-index="1" data-setsize="6" value="Mochi" label="Mochi" selected="false" data-accessible-text-cardinality-separator="of" inactive="false" class="mds-select-option--cpo">
                        <!--2nd Shadow Root within, open-->
                        
                            <div class="option option--hidden" tabindex="-1" role="option" aria-disabled="false" aria-posinset="1" aria-setsize="6">
                                <div class="option__label">
                                    <span class="option__accessible-text">Mochi</span>
                                    <span class="option__label-primary" aria-hidden="true">Mochi</span>
                                    <div class="option__slot-container" aria-hidden="true">
                                        <slot></slot>
                                    </div>
                                </div>
                            </div>
                        
                        </mds-select-option>
                    </div>
                </div>
            </div>
        </mds-select>
    </body>
</html>
"@

#Dot Notation
$test.html.body.'mds-select'.div.div.div.'mds-select-option'[0]
#XPath
$path = '//mds-select/div/div/div/mds-select-option[1]'
Select-Xml -Xml $test.html.body -XPath $path | Select -ExpandProperty Node

Output:

PS C:\Users\rasim\Dropbox\GitHub\Powershell\RemedyForce> $test.html.body.'mds-select'.div.div.div.'mds-select-option'[0]

data-index                                 : 0
data-setsize                               : 6
value                                      : Monkey
label                                      : Monkey
selected                                   : false
data-accessible-text-cardinality-separator : of
inactive                                   : false
class                                      : mds-select-option--cpo
#comment                                   : 2nd Shadow Root within, open
div                                        : div


PS C:\Users\rasim\Dropbox\GitHub\Powershell\RemedyForce> $path = '//mds-select/div/div/div/mds-select-option[1]'
Select-Xml -Xml $test.html.body -XPath $path | Select -ExpandProperty Node

data-index                                 : 0
data-setsize                               : 6
value                                      : Monkey
label                                      : Monkey
selected                                   : false
data-accessible-text-cardinality-separator : of
inactive                                   : false
class                                      : mds-select-option--cpo
#comment                                   : 2nd Shadow Root within, open
div                                        : div
1 Like
3

Hi @rob-simmers, thanks for responding and the tips. Would you know how I could use it to access the elements within child of Shadow roots using Selenium C# Webdriver?

4

Have not used Selenium, but based on what you posted and the XPath I provided, my assumption would be something like:

$ChromeDriver.FindElementByXPath('//*[@id="mds-select"]/div/div/div/mds-select-option[1]').Click()
5

@rob-simmers so how would you do this without Selenium?