访问 shadow DOM 树答案

【问题标题】：Access to shadow DOM tree访问 shadow DOM 树
【发布时间】：2018-06-13 13:13:03
【问题描述】：

无法访问 shadow dom 中的元素。

显示外观的屏幕截图：

我试过用：

    WebElement root1 = DriverFactory.driver.findElement(By.tagName("downloads-manager"));       
    WebElement shadowRoot1 = expandRootElement(root1);

    WebElement root2 = shadowRoot1.findElement(By.cssSelector("iron-list"));
    WebElement shadowRoot2 = expandRootElement(root2);

    WebElement root3 = shadowRoot2.findElement(By.cssSelector("downloads-item"));
    WebElement shadowRoot3 = expandRootElement(root3);

    shadowRoot3.findElement(By.xpath("//div[@id='title-area' and contains(.,'Lviv')]/ancestor::div[@class='controls']/a[@id='preview']")).click();
 public WebElement expandRootElement(WebElement element) {
    WebElement ele = (WebElement) ((JavascriptExecutor) DriverFactory.driver)                
    .executeScript("return arguments[0].shadowRoot",element);
    return ele;}

结果：

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"downloads-item"}

【问题讨论】：

您可以添加 HTML 文本而不是图像吗？
浏览器基于铬，但更安全的修改。无法获取 HTML 文本，只能获取屏幕截图（（点击图片放大。
检查我的答案
请阅读为什么screenshot of HTML or code or error is a bad idea。考虑使用基于格式化文本的相关 HTML、代码试验和错误堆栈跟踪来更新问题。
我没有找到任何方法如何使用 shadow dom 元素复制 HTML。

标签： java selenium shadow-dom

【解决方案1】：

你可以在Xpath下面使用

.//*[@id='downloads-list']/downloads-item

或 CSS 选择器

#downloads-list>downloads-item

【讨论】：

在 '#downloads-list' 和 'downloads-item' 之间，我们有 '#shadow-root' 项，它阻止与降级元素（在本例中为 'downloads-item'）的交互并丢弃 -没有这样的元素：无法找到元素：{"method":"css selector","selector":"#downloads-list>downloads-item"}
您可以尝试在 CSS 选择器上使用 #downloads-list>shadow-root > downloads-item

【解决方案2】：

你写错了请参考下面的代码

By.tagName("iron-list")) By.cssselectorBy.tagName("#downloads-item"));

【讨论】：

'iron-list' - id = 'downloads list' 的元素。 'downloads-item' - 也是元素，不是 id
更正我的答案请检查