Python中Selenium无法检测Shadow Root内可见按钮的解决求助

需要定位登录弹窗中作为Shadow Root直接子元素的，弹窗内其他元素可正常定位，但该按钮定位时触发TimeoutException，请求解决定位及点击问题。

按钮HTML代码 #

<button class="walla-button__button walla-button__button--full-width walla-button__button--large walla-button__button--primary" role="button" type="submit" part="button">
    <div class="walla-button__children-container" part="children-container">
        <slot name="left-icon"></slot>
        <span>Acceder a Wallapop</span>
        <slot name="right-component"></slot>
    </div>
</button>

可成功定位的元素示例 #

输入：

wait.until(EC.element_to_be_clickable((By.XPATH,"//*[@id='signin-email']")))

输出：

<selenium.webdriver.remote.webelement.WebElement
(session="0f58f81835cb803c3785a19702d01945",
element="f.267C3EB8F2845581DDDFF3F95FF7DD1E.d.ABF640D3BAB43142CFC70C05BF2CACE6.e.124")>

定位失败的代码及报错 #

输入：

wait.until(EC.visibility_of_any_elements_located((By.XPATH,"//button[@class='walla-button__button walla-button__button--full-width walla-button__button--large walla-button__button--primary' and @type='submit']")))

输出：

-------------------------------------------------------------------------- TimeoutException Traceback (most recent call last) Cell In[214], line 1
----> 1 wait.until(EC.visibility_of_any_elements_located((By.XPATH,"//button[@class='walla-button__button walla-button__button--full-width walla-button__button--large
walla-button__button--primary' and @type='submit']")))

File
~\anaconda3\Lib\site-packages\selenium\webdriver\support\wait.py:105,
in WebDriverWait.until(self, method, message)
    103     if time.monotonic() > end_time:
    104         break
--> 105 raise TimeoutException(message, screen, stacktrace)

TimeoutException: Message: 
    wait.until(EC.visibility_of_any_elements_located((By.XPATH,"//button[@class='walla-button__button walla-button__button--full-width walla-button__button--large walla-button__button--primary' and @type='submit']")))

解决方案 #

核心原因 #

常规Selenium定位方式无法穿透Shadow Root，必须先进入Shadow Root上下文，才能定位其内部元素。

实现步骤及代码 #

1. 定位Shadow Host：找到包含目标Shadow Root的宿主元素（可通过浏览器开发者工具查看该元素的标签或选择器，通常是自定义组件标签）
2. 获取Shadow Root对象
3. 在Shadow Root内部定位并点击按钮

方法一：Selenium原生API操作

# 替换为实际的Shadow Host选择器（如自定义标签、ID等）
shadow_host = driver.find_element(By.CSS_SELECTOR, "替换为Shadow Host的CSS选择器")
# 获取Shadow Root
shadow_root = shadow_host.shadow_root
# 在Shadow Root内等待按钮可点击并点击
submit_button = wait.until(EC.element_to_be_clickable(
    (By.CSS_SELECTOR, "button.walla-button__button.walla-button__button--full-width.walla-button__button--large.walla-button__button--primary[type='submit']")
))
submit_button.click()

方法二：JavaScript直接获取

如果Shadow Host定位较复杂，可直接用JS穿透Shadow Root：

# 替换Shadow Host选择器为实际值
submit_button = driver.execute_script("""
    return document.querySelector('替换为Shadow Host的CSS选择器').shadowRoot.querySelector('button.walla-button__button.walla-button__button--full-width.walla-button__button--large.walla-button__button--primary[type="submit"]');
""")
# 等待按钮可点击后点击
wait.until(EC.element_to_be_clickable(submit_button)).click()

注意事项 #

• 若不确定Shadow Host选择器，打开浏览器开发者工具，找到目标按钮所在的Shadow Root，向上溯源找到对应的宿主元素（通常是自定义HTML标签，如<walla-login-modal>）
• 优先使用CSS选择器定位Shadow内部元素，比XPath更简洁可靠

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