使用Powershell和Selenium获取阴影根中的元素

Question

我试图使用Powershell和Selenium在chrome浏览器中自动单击。到目前为止，我已经成功地单击了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="linkCategoryId"//div/div2/div/div/div/mds-select-option1').Click()“

但我只是得到了一个错误日志，上面写着“无法定位元素”：

​

​

如果有人能帮我，提供建议，或者向我指出正确的方向，我会非常感激。

Answer 1

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

您应该使用executeScrit来获取信息，因为shadowRoot不是正常DOM的一部分。