如何使用Python+Selenium修改Chrome中#shadow-root (user-agent)的数值

#shadow-root (user-agent)属于浏览器内核内置的私有Shadow DOM，是用户代理层面的实现，默认禁用普通JS直接读写访问，这是浏览器规范层面的限制，所以你用常规DOM方法无法获取内部节点。

你当前的场景不需要直接操作Shadow Root内部节点：tel类型input的内置Shadow Root里的div显示内容，和input的value属性是双向绑定的，你只要修改input的value值，内部div的内容会自动同步更新，优先推荐该方案，兼容性最稳定。

方案1：Selenium直接操作input（推荐） #

两种常用操作方式，示例代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 初始化Chrome驱动，省略打开目标页面逻辑
driver = webdriver.Chrome()

# 定位目标input元素
tel_input = driver.find_element(By.ID, "mytel")

# 操作方式a：清空原有值后输入新值，比如要修改为200
tel_input.clear()
tel_input.send_keys("200")

# 操作方式b：直接通过JS修改value属性，适合输入逻辑有特殊限制的场景
# driver.execute_script("arguments[0].value = '200'", tel_input)

方案2：特殊需求直接操作Shadow Root #

如果确实有必须直接修改内部div的场景，可以通过开启Chrome实验性参数实现访问，该方案兼容性不稳定，非必要不建议使用：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 启动Chrome时添加实验参数开启user-agent shadow root访问权限
options = webdriver.ChromeOptions()
options.add_argument("--enable-experimental-web-platform-features")
driver = webdriver.Chrome(options=options)

# 定位input后执行JS操作内部节点
tel_input = driver.find_element(By.ID, "mytel")
driver.execute_script("""
const shadowRoot = arguments[0].shadowRoot;
const innerDiv = shadowRoot.querySelector('div');
innerDiv.textContent = '你要修改的数值';
""", tel_input)

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