访问 Shadow DOM 中的元素

Question

使用python-selenium可以在Shadow DOM中查找元素吗？

示例用例：

我有一个type="date"的input：

<input type="date" name="bday">

我想要点击右侧的日期选择器按钮，并从日历中选择一个日期。

如果您在Chrome开发者工具中检查该元素并展开日期输入的shadow-root节点，您会看到该按钮显示为：

<div pseudo="-webkit-calendar-picker-indicator" id="picker"></div>

在 Chrome 中的外观截图：

通过id查找“picker”按钮会导致NoSuchElementException：

>>> date_input = driver.find_element_by_name('bday')
>>> date_input.find_element_by_id('picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element

我也尝试过使用建议这里的::shadow和/deep/定位器：

>>> driver.find_element_by_css_selector('input[name=bday]::shadow #picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element
>>>
>>> driver.find_element_by_css_selector('input[name=bday] /deep/ #picker')
...
selenium.common.exceptions.NoSuchElementException: Message: no such element

---

请注意，我可以通过向输入框发送按键来更改日期：

driver.find_element_by_name('bday').send_keys('01/11/2014')

但是，我想通过从日历中选择日期来具体设置日期。

- alecxe

---

您是否在使用最新版本的ChromeDriver？自ChromeDriver v2.14（2015-01-28）起，支持Shadow DOM。 - f.cipriani

@f.cipriani 是的，最新版本为（2.14）。谢谢。 - alecxe

你有一个使用案例的“功能性”示例吗？ - SiKing

@SiKing 我一直在使用w3schools的那个（抱歉: )。注意：在访问日期输入之前，您需要切换到iframe。 - alecxe

仅在Chrome中有效，无法在FF中使用。 :( 你只需要Python的答案吗？ - SiKing

@SiKing 如果您能提供使用其他Selenium绑定的答案，那也可以帮助我 - 我会尝试模仿解决方案，看看是否可以使用Python绑定来到达那个选择器按钮。谢谢。 - alecxe

Answer 1

无法访问原生HTML5元素的阴影根。

在这种情况下没有用，但是使用Chrome可以访问自定义创建的阴影根：

var root = document.querySelector("#test_button").createShadowRoot();
root.innerHTML = "<button id='inner_button'>Button in button</button"

<button id="test_button"></button>

根据这种方式可以访问根节点：

 var element = document.querySelector("#test_button").shadowRoot;

如果您想使用Selenium Python（ChromeDriver版本2.14+）自动点击内部按钮：

 >>> outer = driver.execute_script('return document.querySelector("#test_button").shadowRoot')
 >>> inner = outer.find_element_by_id("inner_button")
 >>> inner.click()

2015年6月9日更新

这是当前Shadow DOM W3C编辑草案在github上的链接：

http://w3c.github.io/webcomponents/spec/shadow/

如果您对浏览blink源代码感兴趣，这是一个不错的起点。

- f.cipriani

---

这完全有道理。你基本上是在说这个新的chromedriver功能：Issue 852: Support shadow dom in chromedriver. 主要是关于带有shadow DOM的自定义元素，对吗？ - alecxe

没问题。Chromedriver只是浏览器API的封装。由于Chrome不允许对用户代理shadow DOM进行脚本化访问（虽然可以进行样式化），因此selenium也是如此。 - f.cipriani

很好的答案，但对于嵌套的影子根元素有一些缺点，请查看我下面的答案。 - Eduard Florinescu

Answer 2

接受的答案有一个缺点，很多时候阴影主机元素被隐藏在阴影树中，因此最好的方法是使用selenium选择器来查找阴影主机元素，并注入脚本以获取阴影根：

def expand_shadow_element(element):
  shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root

#the accepted answer code then becomes 
outer = expand_shadow_element(driver.find_element_by_css_selector("#test_button"))
inner = outer.find_element_by_id("inner_button")
inner.click()

为了让您更好地理解，我现在会举一个可供测试的例子，就是谷歌浏览器下载页面，点击搜索按钮需要打开三个嵌套的阴影根元素：

import selenium
from selenium import webdriver
driver = webdriver.Chrome()


def expand_shadow_element(element):
  shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root

driver.get("chrome://downloads")
root1 = driver.find_element_by_tag_name('downloads-manager')
shadow_root1 = expand_shadow_element(root1)

root2 = shadow_root1.find_element_by_css_selector('downloads-toolbar')
shadow_root2 = expand_shadow_element(root2)

root3 = shadow_root2.find_element_by_css_selector('cr-search-field')
shadow_root3 = expand_shadow_element(root3)

search_button = shadow_root3.find_element_by_css_selector("#search-button")
search_button.click()

使用接受答案方法进行相同操作的缺点是它硬编码了查询，可读性较差，并且您无法将中间选择用于其他操作。

search_button = driver.execute_script('return document.querySelector("downloads-manager").shadowRoot.querySelector("downloads-toolbar").shadowRoot.querySelector("cr-search-field").shadowRoot.querySelector("#search-button")')
search_button.click()

- Eduard Florinescu

---

只有在 Shadow DOM 开启的情况下，他的代码才能正常工作，是吗？否则 .shadowRoot 将返回 null。有没有方法可以访问关闭的 Shadow DOM？编写 Chrome 扩展程序不会是问题。 - Pascal

感谢您的回复。在这篇博客文章中，它举例说明了封闭的 Shadow DOM 返回 NULL 的事实（https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af）。 - Pascal

@Pascal，实际上你说得对，我不知道这个开/关模式。 - Eduard Florinescu

是的，我也不知道。我在这个Selenium测试用例中发现了这个问题，并正在尝试找到解决方法。不管怎样，谢谢。 - Pascal

是的...我可能会选择扩展名。非常感谢。 - Pascal