[英]Accessing elements in the shadow DOM
是否可以使用python-selenium 在Shadow DOM中找到元素 ?
用例示例:
我input
了type="date"
:
<input type="date">
我想點擊右邊的日期選擇按鈕 ,然后從日歷中選擇一個日期。
如果您要檢查Chrome開發者工具中的元素並展開日期輸入的影子根節點,您會看到該按鈕顯示為:
<div pseudo="-webkit-calendar-picker-indicator" id="picker"></div>
屏幕截圖演示了它在Chrome中的外觀:
按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/
定位器的建議在這里 :
>>> 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')
但是,我想通過從日歷中選擇日期來具體設置日期。
無法訪問本機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編輯器草案的鏈接:
接受的答案有一個缺點,很多時候陰影主機元素隱藏着陰影樹,這就是為什么最好的方法是使用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的下載頁面添加了一個可測試的示例,單擊搜索按鈕需要打開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()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.