如何用Selenium定位嵌套开放Shadow Root内的内层按钮

问题场景 #

网页HTML结构如下：

<custom-tag1 class data-component-key="..." ...>
 #shadow-root (open)
  <div class="...">
    <custom-tag2 ...>
     #shadow-root (open)
     <button class="button-download" style="background: transparent; border: 0;">
     </button>
    </custom-tag2>
  </div>
</custom-tag1>

已通过以下代码获取外层Shadow Root：

outer_host = driver.find_element_by_css_selector("custom-tag1")
outer_shadow_root = driver.execute_script("return arguments[0].shadowRoot", outer_host)

但无法通过outer_shadow_root的find_element方法定位到custom-tag2，所有定位器调用均失败。

解决思路 #

• 改用execute_script在Shadow Root内查询元素
  部分Selenium版本中，ShadowRoot对象的find_element方法存在兼容性问题，直接调用易失败。可通过execute_script传入Shadow Root对象，用原生JS的querySelector查找内部元素：

  # 在外层Shadow Root中定位custom-tag2
  inner_host = driver.execute_script("return arguments[0].querySelector('custom-tag2')", outer_shadow_root)
  # 获取内层Shadow Root
  inner_shadow_root = driver.execute_script("return arguments[0].shadowRoot", inner_host)
  # 定位目标下载按钮
  download_btn = driver.execute_script("return arguments[0].querySelector('.button-download')", inner_shadow_root)
  

• 等待元素动态加载完成
  若custom-tag2是异步渲染的，需等待元素加载完成后再定位。结合WebDriverWait和execute_script实现等待：

  from selenium.webdriver.support.ui import WebDriverWait
  
  # 等待10秒，直到outer_shadow_root内出现custom-tag2
  inner_host = WebDriverWait(driver, 10).until(
      lambda d: d.execute_script("return arguments[0].querySelector('custom-tag2')", outer_shadow_root)
  )
  

• 校验定位器的准确性
  确认custom-tag2的定位器是否正确：

  • 优先使用唯一标识属性（如data-*、ID）作为定位器
  • 若外层div有明确类名，可结合父元素缩小范围，例如div.some-container custom-tag2

• 升级Selenium版本
  旧版Selenium对Shadow DOM的支持不完善，升级到4.x及以上版本后，可直接使用CSS选择器穿透多层Shadow DOM（需浏览器支持该特性）：

  # 直接定位嵌套Shadow DOM内的按钮
  download_btn = driver.find_element_by_css_selector("custom-tag1::shadow div custom-tag2::shadow .button-download")
  

内容的提问来源于stack exchange，提问作者MMM