Кто-нибудь знает, как идентифицировать веб-элементы теневого дома, используя selenium webdriver?

Question

Мы используем веб-драйвер selenium и python для автоматизации тестирования и пытаемся автоматизировать приложение html5 с дизайном тени. Не удалось идентифицировать элементы, которые попадают под теневой корень. Напр. Если я хочу получить доступ к любому элементу под теневым корнем, указанному ниже, то как я могу это сделать? Любая помощь приветствуется.

Answer 1

Вы можете вводить этот кусок JavaScript, что делает это, а затем запустить методы find_element на этом элементе:

shadow_section = mydriver.execute_script('''return document.querySelector("neon-animatable").shadowRoot''') 
shadow_section.find_element_by_css(".flex") 

, поскольку вы часто используете, что вы можете создать функцию,, то выше становится:

def select_shadow_element_by_css_selector(selector): 
    running_script = 'return document.querySelector("%s").shadowRoot' % selector 
    element = driver.execute_script(running_script) 
    return element 

shadow_section = select_shadow_element_by_css_selector("neon-animatable") 
shadow_section.find_element_by_css(".flex") 

на результирующем элементе, который вы можете поместить любого из методов:

find_element_by_id 
find_element_by_name 
find_element_by_xpath 
find_element_by_link_text 
find_element_by_partial_link_text 
find_element_by_tag_name 
find_element_by_class_name 
find_element_by_css_selector 

Чтобы найти несколько элементов (эти методы будут возвращать список):

find_elements_by_name 
find_elements_by_xpath 
find_elements_by_link_text 
find_elements_by_partial_link_text 
find_elements_by_tag_name 
find_elements_by_class_name 
find_elements_by_css_selector 

позже редактировать:

много раз корневые элементы вложены и второй вложенной элемент больше не доступен в документе, но доступен в текущем доступном теневом корне. Я думаю, что лучше использовать селеновые селекторы и впрыснуть сценарий просто взять тень корень:

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

#the above becomes 
shadow_section = expand_shadow_element(find_element_by_tag_name("neon-animatable")) 
shadow_section.find_element_by_css(".flex") 

Чтобы поместить это в перспективу я просто добавил проверяемой пример с загрузкой страницы в 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 

selenium.__file__ 
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()