如何读取#shadow-root（用户代理）下的文本

Question

我正在使用 Selenium (Python) 来自动化网页。我正在尝试从#shadow-root（用户代理）下的输入字段获取文本。 我使用的 Xpath：

driver.find_element_by_xpath("**//*/p-calendar/span/input**").text

没有返回任何内容。 附上我的 DOM 元素的屏幕截图。 要求：从影子根获取文本：01:01

Answer 1

根据 @hayatoito（Shadow DOM 的创建者）评论：

引入封闭影子树的最初动机是“绝不允许通过任何 API 从外部访问封闭影子树中的节点”，AFAIK 。就像这样，我们无法访问 Blink 中 元素中使用的内部隐藏阴影树中的节点。

其实我就是这样设计了一棵封闭的影子树的。如果有一种方法可以访问封闭影子树中的节点，则应将其视为规范的错误。

我认为拥有一个 API 来允许在 Chrome 应用程序或扩展程序层进行访问是完全可以的。
然而，对于普通的网络应用程序，我认为当前的协议是“绝不允许”。

如果我们允许，这意味着我们不需要封闭的影子树。我认为，只要有一棵开放的影子树就足够了。

在他自己在讨论中的回答下面的评论中进一步@Supersharp 如何使用 JavaScript 获取用户代理影子根中的元素？ 提到：

#shadow-root (user-agent) 是浏览器供应商的本机实现，因此它们没有记录并且永远无法访问。根据规范，仅开放 Shadow DOM

---

WebDriver 的观点

，只有开放的 Shadow DOM 是开放的。 com/w3c/webcomponents/issues/771" rel="noreferrer">WebDriver - Web 组件的可测试性

• 请求
• 提案
• < a href="https://github.com/w3c/webcomponents/issues/354" rel="noreferrer">问题跟踪器

目前 Selenium 团队 已开放用于接受相同的拉取请求。

---

参考

您可以在以下位置找到一些相关的详细讨论：

• 需要帮助点击阴影根（闭合）类型下的元素

---

Outro

在这里你可以找到关于如何使用selenium自动化影子DOM元素？

Answer 2

您可以使用 driver.execute_script 注入返回 ShadowRoot 的 JavaScript 代码，然后使用 find_element 获取您要查找的影子根的子元素。

input_shadow = driver.execute_script('''return document.querySelector("$1").shadowRoot''')
div_text = inputShadow.find_element_by_tag_name("div").text

$1 - 您的元素的标识符或选择器。

如果你热衷于使用 xpath 来查找元素

input_shadow = driver.execute_script('''return $x(\"//*/p-calendar/span/input\")[0]''')
div_text = inputShadow.find_element_by_tag_name("div").text

Answer 3

如果您的控件位于 Shadow-root（用户代理）内部。您可以使用 Shadow-root（用户代理）的父级执行输入文本、获取值和单击。

示例：考虑有问题的 HTML DOM 共享。

（Selenium/C# 代码）-同样也应该适用于其他人

//You can use any identifier like id, XPath, tagname, etc
Var element = Driver.FindElement(By.Tagname("input"));
//Text will return null, so use below code
var text = element.GetAttribute("value");
or
element.Click();
or
element.Sendkeys("Etered text");