selenium webdriver (chromedriver) 和访问 shadow dom [英] selenium webdriver (chromedriver) and accessing shadow dom

问题描述

我正在测试一个使用 shadow dom 的新应用程序，如下所示:

I'm testing out a new application that uses shadow dom like so:

 #shadow-root (open)
    <div class="th_filePicker">
        <div class="th_fp_header">
            <div class="th_fp_title" role="heading" aria-level="1" data-l10n-id="th_fp_title">Select Image</div>
                <div class="th_fp_Close"><button class="close-popup" data-l10n-id="close_popup" title="Close"></button></div>
        </div>
    </div>

有没有人知道如何访问文件选择器控件中的元素 - 特别是关闭图标?

Does anyone have any idea on how I can access the elements in the file picker control - specifically, the close icon?

推荐答案

这是可能的，但需要几个步骤.作为初步准备，请查看 此页面关于访问 shadow dom.我发现它非常有用.

It's possible, but it will take a couple steps. As a preliminary, check out this page about accessing shadow dom. I found it really informative.

从两种方法开始获取shadow dom元素:

Start with two methods to get the shadow dom element:

private WebElement shadowDom;

private WebElement expandRootElement(WebElement element) {
    WebElement ele = (WebElement) ((JavascriptExecutor) driver)
        .executeScript("return arguments[0].shadowRoot",element);
    return ele;
}
private void findByShadowRoot(WebDriver driver) {
    shadowDom = expandRootElement(
        driver.findElement(By.id("whatEverTheShadowDomIdIs")));
}

从那里，您可以将方法创建为伪 POM

From there, you create methods as a pseudo POM

private WebElement findByShadowButton() {
    findByShadowRoot(driver);
    return shadowDom.findElement(By.cssSelector("div.th_fp_Close"));
}

基本上前两个方法是创建一个起点，然后所有其他方法调用这些方法并说，从这个起点，找到它下面的元素".

Basically the first two methods are for creating a starting point, and then all the other methods call those methods and say, "from this starting point, find the element beneath it".

然后你可以这样声明:

findByShadowButton().click();

这篇关于selenium webdriver (chromedriver) 和访问 shadow dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！