有人知道如何使用 selenium webdriver 识别 shadow dom web 元素吗? [英] Does anybody know how to identify shadow dom web elements using selenium webdriver?

问题描述

我们正在使用 selenium web 驱动程序和 python 进行测试自动化，并尝试使用 shadow dom 设计自动化 html5 应用程序.无法识别 shadow-root 下的任何元素.例如.如果我想访问下面给出的影子根下的任何元素，那么我该怎么做?任何帮助表示赞赏.

解决方案

您可以注入执行此操作的这段 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' % 选择器element = driver.execute_script(running_script)返回元素shadow_section = select_shadow_element_by_css_selector("霓虹动画")shadow_section.find_element_by_css(".flex")

在结果元素上，您可以放置​​任何方法:

<块引用>

find_element_by_idfind_element_by_namefind_element_by_xpathfind_element_by_link_textfind_element_by_partial_link_textfind_element_by_tag_namefind_element_by_class_namefind_element_by_css_selector

要查找多个元素(这些方法将返回一个列表):

find_elements_by_namefind_elements_by_xpathfind_elements_by_link_textfind_elements_by_partial_link_textfind_elements_by_tag_namefind_elements_by_class_namefind_elements_by_css_selector

稍后

多次嵌套根元素，第二个嵌套元素在文档中不再可用，但在当前访问的影子根中可用.我认为最好使用 selenium 选择器并注入脚本以获取影子根:

def expand_shadow_element(element):shadow_root = driver.execute_script('返回参数[0].shadowRoot', element)返回 shadow_root#上面变成shadow_section = expand_shadow_element(find_element_by_tag_name("霓虹动画"))shadow_section.find_element_by_css(".flex")

为了理解这一点，我刚刚在 Chrome 的下载页面中添加了一个可测试的示例，单击搜索按钮需要打开 3 个嵌套的阴影根元素:

导入硒从硒导入网络驱动程序驱动程序 = webdriver.Chrome()def expand_shadow_element(element):shadow_root = driver.execute_script('返回参数[0].shadowRoot', element)返回 shadow_root硒.__文件__driver.get("chrome://downloads")root1 = driver.find_element_by_tag_name('下载管理器')shadow_root1 = expand_shadow_element(root1)root2 = shadow_root1.find_element_by_css_selector('下载工具栏')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()

We are using selenium web driver and python for our test automation and trying to automate html5 app with shadow dom design. Unable to identify any elements that come under shadow-root. For eg. If I want to access any element under the shadow root given below then how can I do that? Any help is appreciated.

解决方案

You can inject this piece of javascript that does this and then run the find_element methods on that element:

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

since you use often that you may create a function, , then the above becomes:

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

on the resulting element you can put any of the methods:

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

To find multiple elements (these methods will return a list):

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

later edit:

many times the root elements are nested and the second nested element is no longer available in document, but is available in the current accessed shadow root. I think is better to use the selenium selectors and inject the script just to take the shadow root:

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

To put this into perspective I just added a testable example with Chrome's download page, clicking the search button needs open 3 nested shadow root elements:

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

这篇关于有人知道如何使用 selenium webdriver 识别 shadow dom web 元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！