Kann jemand Shadow Dom Web-Elemente mit Selen-Webdriver identifizieren?

Question

Wir verwenden Selen-Web-Treiber und Python für unsere Testautomatisierung und versuchen, HTML5-App mit Shadow-DOM-Design zu automatisieren. Es konnten keine Elemente identifiziert werden, die unter "shadow-root" stehen. Für z. Wenn ich unter der unten angegebenen Schattenwurzel auf ein beliebiges Element zugreifen möchte, wie kann ich das tun? Jede Hilfe wird geschätzt.

Answer 1

Sie können dieses Stück Javascript injizieren, das dies tut und dann die find_element Methoden auf diesem Element laufen:

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

da Sie häufig verwenden, dass Sie eine Funktion erstellen kann, dann ist die oben wird:

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") 

auf dem resultierenden Element Sie eine der Methoden setzen kann:

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 

mehrere Elemente zu finden (diese Methoden wird eine Liste zurück):

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 

später bearbeiten:

viele Male die Wurzelelemente verschachtelt sind und die zweite verschachtelte Element ist im Dokument nicht mehr verfügbar, aber im aktuell aufgerufenen Schattenstamm verfügbar. Ich denke, ist besser, die Selen-Selektoren zu verwenden und das Skript zu injizieren nur die Schatten Wurzel zu nehmen:

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") 

Um dies zu relativieren ich nur ein prüfbar Beispiel mit Chrome Download-Seite hinzugefügt, die Suchtaste Bedürfnisse Anklicken öffnen 3 verschachtelte Schatten Stammelemente:

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()