访问影子DOM中的元素

Question

使用python selenium可以在阴影DOM中找到元素吗？

示例用例：

我有这个input和type="date"：

<input type="date">

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

如果要检查Chrome开发人员工具中的元素并展开日期输入的阴影根节点，则会看到按钮显示为：

<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/定位器，如建议的here：

>>> 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')

但是，我想通过从日历中选择日期来明确地设置日期。

Answer 1

无法访问本机HTML5元素的影子根。

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

&13；

&13；

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日

这是指向github上当前Shadow DOM W3C编辑器草稿的链接：

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

如果您有兴趣浏览blink源代码，this is a good starting point。

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()

为了更好地理解这一点，我刚刚在Chrome的下载页面中添加了一个可测试的示例，单击search按钮需要打开3个嵌套的阴影根元素：

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()