对selenium的Shadow-dom支持

Question

我正在做一个自动化项目，它广泛地使用了卷影DOMs。我使用execute_script函数来访问影子根元素。

例如：

root = driver.execute_script('return document.querySelector(".flex.vertical.layout").shadowRoot')

然后我使用根元素来访问其中的元素。由于我们在许多级别都有影子根元素，这让我很恼火。有没有更好的解决方案来访问卷影根元素中的元素？

我使用的是Chrome 2.20驱动程序。

Answer 1

通过谷歌搜索，我找到了解决这个问题的另一种方法--使用"/deep/组合器“。

例如，我可以使用以下命令访问所有的阴影根元素

driver.find_elements_by_css_selector('body/deep/.layout.horizontal.center')

这将访问复合类名为layout horizontal center的元素，而不管它有多少影子根。

但这只适用于chromedriver，而/deep/是一种被弃用的方法。

Answer 2

关于阴影DOM，WebDriver规范仍然是doesn't have anything specific to say。

也不是Selenium project pages -这是可以理解的，因为它们严格遵循规范。然而，some low-level code是存在的。

因此，简短的回答是：不，目前在规范、Selenium的WebDriver应用程序接口或实现代码中没有特殊的支持。

是的，这个功能似乎存在于Chrome2.14中(作为ChromeDriver的一个包装器)。但是，据我所知，没有Selenium或WebDriver级别的绑定可以让您使用它。

但有关更多详细信息和可能的解决方法，请参阅：Accessing Shadow DOM tree with Selenium，也请参阅：Accessing elements in the shadow DOM，特别是：Finding elements in the shadow DOM

Answer 3

为了在Chrome上实现自动化，我想出了一个不太优雅的解决方案:递归地搜索每个卷影dom，显式地使用：

driver.executeScript(scriptToRun, cssSelector);

下面是javascript (作为字符串传递)：

function recursiveSearch(element, target) {
    let result = element.querySelector(target);
    if (result) { return result; }
    let subElements = element.querySelectorAll("*");
    for (let i = 0; i < subElements.length; i++) {
        let subElement = subElements[i];
        if (subElement && subElement.shadowRoot) {
            let result = recursiveSearch(subElement.shadowRoot, target);
            if (result) return result;
        }
    }
}
return recursiveSearch(document, arguments[0]);

由于shadowRoot的内容最初可能为空，因此可以使用driver.wait和until.elementIsVisible来避免返回空元素。

异步示例：

return await driver.wait(until.elementIsVisible(await driver.wait(async () => {
           return await driver.executeScript(scriptToRun, cssSelector);
       }, timeOut)));

另一个选择

我之前的解决方案是显式地使用阴影遍历元素，但自主性较差。与上面相同，但使用此脚本：

let element = document.querySelector(arguments[0][0]);
let selectors = arguments[0].slice(1);
for (i = 0; i < selectors.length; i++) {
    if (!element || !element.shadowRoot) {return false;}
        element = element.shadowRoot.querySelector(selectors[i]);
    }
return element;

其中selectors应该是这样的：

['parentElement1', 'parentElement2', 'targetElement']

附注

我发现在Firefox Quantum 57.0上运行我的自动化测试不会受到隐藏的阴影doms的影响，并且任何元素都可以用一个简单的：

driver.findElement(searchQuery);