是否可以使用python-selenium 在Shadow DOM 中查找元素?
示例用例:
我有input
type="date"
:
<input type="date">
&#13;
我想点击右边的日期选择按钮,然后从日历中选择一个日期。
如果您要检查Chrome开发者工具中的元素并展开日期输入的影子根节点,您会看到该按钮显示为:
<div pseudo="-webkit-calendar-picker-indicator" id="picker"></div>
屏幕截图演示了它在Chrome中的外观:
找到&#34;选择器&#34;按ID按钮会导致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')
但是,我想通过从日历中选择日期来具体设置日期。
答案 0 :(得分:8)
无法访问原生HTML 5元素的影子根。
在这种情况下没用,但使用Chrome可以访问自定义创建的影子根:
var root = document.querySelector("#test_button").createShadowRoot();
root.innerHTML = "<button id='inner_button'>Button in button</button"
<button id="test_button"></button>
然后可以通过以下方式访问root:
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。
答案 1 :(得分:4)
接受的答案有一个缺点,很多时候阴影主机元素都隐藏着阴影树,这就是为什么最好的方法就是使用selenium选择器找到阴影主机元素并注入脚本只是为了拍摄阴影根:
Comparable
为了说明这一点,我刚刚在Chrome的下载页面添加了一个可测试的示例,单击搜索按钮需要打开3个嵌套的阴影根元素:
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()