Selenium WebDriver NodeJS如何向shadow root内输入框插入值

Cannot read properties of null (reading 'shadowRoot')报错的核心原因是执行获取shadowRoot逻辑时，对应的宿主元素返回值为null，通常由三类问题导致：

• 代码执行时机过早，shadow宿主元素还未完成页面渲染加载
• 目标输入框存在多层shadow root嵌套，仅穿透了最外层就尝试查找内部元素
• 宿主元素的定位规则错误，没有匹配到真实的shadow挂载节点

实现步骤 #

1. 提前确认嵌套结构 #

打开浏览器开发者工具，在元素面板找到placeholder属性为「Pesquisar」的input节点，向上逐级回溯，统计带#shadow-root (open)标识的节点层数，记录每一层宿主元素的标签、属性等可用于定位的特征。

不要直接复用其他站点的shadow穿透代码，不同站点的shadow嵌套层级、宿主元素标识完全不同，直接套用必然定位失败。

2. 配合显式等待逐层穿透 #

所有shadow内部的元素无法通过全局document或者driver直接查找，必须从上到下逐层获取shadowRoot后再查找下一级节点，同时必须加显式等待规避加载时机问题，参考代码如下（Selenium + Python）：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 初始化浏览器
driver = webdriver.Chrome()
driver.get("目标页面地址")
wait = WebDriverWait(driver, 15)

# --- 以下为多层穿透示例，实际使用时替换为你页面的真实宿主选择器 ---
# 等待最外层shadow宿主加载，获取第一层shadowRoot
outer_shadow_host = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "最外层宿主元素CSS选择器")))
outer_shadow_root = driver.execute_script("return arguments[0].shadowRoot", outer_shadow_host)

# 如果有第二层嵌套，在第一层shadowRoot下找第二层宿主，获取第二层shadowRoot
mid_shadow_host = outer_shadow_root.find_element(By.CSS_SELECTOR, "中间层宿主元素CSS选择器")
mid_shadow_root = driver.execute_script("return arguments[0].shadowRoot", mid_shadow_host)

# 在最内层shadowRoot中定位目标输入框
search_input = mid_shadow_root.find_element(By.CSS_SELECTOR, "input[placeholder='Pesquisar']")

# 向输入框插入值
search_input.send_keys("需要填入的目标内容")

3. 常见问题排查 #

• 如果嵌套层数超过2层，重复「定位当前层宿主→执行JS获取shadowRoot→在shadowRoot下查找下一层宿主」的逻辑即可，直到穿透到输入框所在的最内层
• 验证选择器是否正确时，可以先在浏览器控制台执行document.querySelector("你的选择器")（外层宿主）或者在上一级shadowRoot上执行querySelector（内层节点），如果返回null就调整选择器规则
• 如果遇到closed模式的shadow root，常规方法无法直接获取shadowRoot，需要在页面加载前注入JS重写Element.prototype.attachShadow方法缓存shadow根引用，普通公开站点的shadow root基本都是open模式，不需要额外处理

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