使用Powershell和Selenium获取shadowroots中的元素

Question

我正在尝试使用Powershell和Selenium在chrome浏览器中自动单击。到目前为止，我已经成功地单击了下面的html文件示例主体中的元素。

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()

使用上面的脚本将单击select元素中的第三个选项（在本例中为“Mercedes”）。

然而，我正在努力操纵阴影根中的元素，我似乎无法访问其中的任何元素，更糟糕的是，我要单击的元素位于子阴影根中，如下图所示：

上述图像的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>

具体来说，我想点击“猴子”

我尝试使用xpath"$ChromeDriver。FindElementByXPath('//*[@id="link分类oryId"]//div/div/div/div/mds-selece-option1'）。单击（）"

但我刚刚收到一个错误日志，上面写着“无法定位元素”：

如果有人能帮助我，给我一些建议，或者给我指出正确的方向，我将不胜感激。

Answer 1

$ChromeDriver.executeScript("document.querySelector('#linkCategoryId').shadowRoot.querySelector('mds-select-option[value="Mochi"]').shadowRoot.querySelector('[class="option__accessible-text"]').click()")

您应该使用executeScrit获取webelement，因为shadowRoot不是普通DOM的一部分