Selenium爬取Shadow Root DOM报错，求提取指定文本的解决方法

问题说明 #

爬取页面https://www.alodokter.com/komunitas/topic/penyebab-dan-cara-mengatasi-sakit-di-bawah-pusar时，目标文本位于双层Shadow Root DOM中（对应元素user-topic-title和user-topic-line-btm），原代码运行报错：

'NoneType' object has no attribute 'find_element'

错误原因 #

1. 代码错误使用shadow.chrome_driver.get()，应直接调用driver.get()
2. 未等待页面元素加载完成，导致获取Shadow Root时返回None
3. 双层Shadow Root的访问逻辑错误，未正确逐层进入

修正后的代码 #

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
from webdriver_manager.chrome import ChromeDriverManager

def expand_shadow_element(element):
    # 执行JS获取元素的Shadow Root
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
    return shadow_root

# 初始化Chrome驱动
driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get('https://www.alodokter.com/komunitas/topic/penyebab-dan-cara-mengatasi-sakit-di-bawah-pusar')

try:
    # 等待第一层带Shadow Root的元素加载完成
    top_element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, 'topic-top'))
    )
    # 获取第一层Shadow Root
    first_shadow_root = expand_shadow_element(top_element)
    
    # 在第一层Shadow Root中，等待第二层带Shadow Root的元素加载
    user_topic_top = WebDriverWait(first_shadow_root, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, 'user-topic-top'))
    )
    # 获取第二层Shadow Root
    second_shadow_root = expand_shadow_element(user_topic_top)
    
    # 提取目标元素文本
    topic_title = second_shadow_root.find_element(By.CSS_SELECTOR, 'user-topic-title').text
    topic_line_btm = second_shadow_root.find_element(By.CSS_SELECTOR, 'user-topic-line-btm').text
    
    print("话题标题:", topic_title)
    print("话题描述:", topic_line_btm)
    
finally:
    # 关闭驱动
    driver.quit()

关键步骤解释 #

• 等待元素加载：使用WebDriverWait配合expected_conditions确保元素已存在于DOM中，避免页面异步加载导致的元素找不到问题
• 逐层访问Shadow Root：先获取第一层Shadow Root，再在其中找到下一个包含Shadow Root的元素，再获取第二层Shadow Root，才能访问到目标内容
• 正确定位目标元素：在第二层Shadow Root中，直接通过CSS选择器定位user-topic-title和user-topic-line-btm元素，提取文本内容

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