使用 Selenium 访问 Shadow DOM 树

Question

是否可以使用 Selenium/Chrome webdriver 访问 Shadow DOM 中的元素？

正如预期的那样，使用普通的元素搜索方法不起作用。我在 w3c 上看到过对 switchToSubTree 规范的引用，但找不到任何实际的文档、示例等。

有人成功了吗？

原文由 lambinator 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，webdriver 规范似乎还不支持这一点。

我的窥探发现：

http://www.w3.org/TR/webdriver/#switching-to-hosted-shadow-doms

https://groups.google.com/forum/#!msg/selenium-developers/Dad2KZsXNKo/YXH0e6eSHdAJ

原文由 Damen TheSifter 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

接受的答案不再有效，其他一些答案有一些缺点或不实用（ /deep/ 选择器不起作用并且已弃用， document.querySelector('').shadowRoot 仅适用于第一个嵌套阴影元素时的阴影元素），有时阴影根元素是嵌套的，第二个阴影根在文档根中不可见，但在其父访问的阴影根中可用。我认为最好使用 selenium 选择器并注入脚本以获取影子根：

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

outer = expand_shadow_element(driver.find_element_by_css_selector("#test_button"))
inner = outer.find_element_by_id("inner_button")
inner.click()

为了正确看待这一点，我刚刚在 Chrome 的下载页面中添加了一个可测试的示例，单击搜索按钮需要打开 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()

原文由 Eduard Florinescu 发布，翻译遵循 CC BY-SA 4.0 许可协议