访问 shadow DOM 中的元素 [英] Accessing elements in the shadow DOM

问题描述

是否可以使用 python-selenium在 Shadow DOM 中查找元素?

用例示例:

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

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

如果您检查 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:消息:没有这样的元素

我也尝试使用 ::shadow 和 /deep/ 定位器作为建议 这里:

<预><代码>>>>driver.find_element_by_css_selector('input[name=bday]::shadow #picker')...selenium.common.exceptions.NoSuchElementException:消息:没有这样的元素>>>>>>driver.find_element_by_css_selector('input[name=bday]/deep/#picker')...selenium.common.exceptions.NoSuchElementException:消息:没有这样的元素

<小时>

请注意，我可以通过向其发送密钥来更改输入中的日期:

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

但是，我想通过从日历中选择来专门设置日期.

解决方案

无法访问原生 HTML 5 元素的影子根.

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

var root = document.querySelector("#test_button").createShadowRoot();root.innerHTML = "按钮中的按钮</button"

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

然后可以通过这种方式访问​​根:

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

如果您想使用 selenium python(chromedriver 版本 2.14+)自动点击内部按钮:

 >>>external = driver.execute_script('return document.querySelector("#test_button").shadowRoot')>>>内部 = 外部.find_element_by_id("inner_button")>>>内部点击()

2015 年 6 月 9 日更新

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

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

如果您有兴趣浏览 blink 源代码，这是一个很好的起点.

Is it possible to find elements inside the Shadow DOM with python-selenium?

Example use case:

I have this input with type="date":

<input type="date">

And I'd like to click the date picker button on the right and choose a date from the calendar.

If you would inspect the element in Chrome Developer Tools and expand the shadow-root node of the date input, you would see the button is appearing as:

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

Screenshot demonstrating how it looks in Chrome:

Finding the "picker" button by id results into NoSuchElementException:

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

I've also tried to use ::shadow and /deep/ locators as suggested 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

---

Note that I can change the date in the input by sending keys to it:

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

But, I want to set the date specifically by choosing it from a calendar.

解决方案

There's no way to access the shadow root of native HTML 5 elements.

Not useful in this case, but with Chrome it's possible to access a custom created shadow root:

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

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

The root can then be accessed this way:

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

If you want to automate a click on the inner button with selenium python (chromedriver version 2.14+):

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

Update 9 Jun 2015

This is the link to the current Shadow DOM W3C Editor's draft on github:

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

If you're interested in browsing the blink source code, this is a good starting point.

这篇关于访问 shadow DOM 中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！