如何用Selenium处理shadow-root(open)点击Wallapop加载更多按钮

问题描述 #

我正在开发Wallapop二手车列表爬虫，平台默认仅显示26条商品，点击“Ver más productos”（查看更多商品）按钮可加载更多内容，但该按钮处于shadow-root(open)中，尝试了一段Python代码却未能成功实现点击加载功能，寻求解决方案。

目标URL：

https://es.wallapop.com/app/search?engine=gasoline&min_horse_power=1&max_horse_power=1000&min_year=2006&max_year=2024&min_km=40000&max_km=200000&min_sale_price=1000&max_sale_price=90000&gearbox=automatic,manual&brand=Honda&model=Civic&filters_source=default_filters&keywords=&category_ids=100&longitude=-3.69196&latitude=40.41956&order_by=price_high_to_low

尝试的代码：

while True: 
        try:
            shadow_host = driver.find_element(By.CSS_SELECTOR, "walla-button") 
            shadow_root = driver.execute_script('return arguments[0].shadowRoot', shadow_host)
            skip_tutorial_button = shadow_root.find_element(By.CSS_SELECTOR, "button.walla-button__button.walla-button__button--medium.walla-button__button--tertiary.walla-button__button--neutral") 
            skip_tutorial_button.click()
        except Exception as e: 
            print("No se encontró el botón 'Ver más productos' o ya se han cargado todos los productos.") 
            break

问题分析 #

你当前代码的核心问题：

• 直接用walla-button选择器可能匹配到页面上多个同类元素，无法精准定位“查看更多”按钮
• 混淆了跳过教程按钮和加载更多按钮的选择逻辑，目标元素的类名或文本匹配错误
• 未处理页面加载的等待逻辑，可能按钮还未渲染完成就执行查找操作

修正后的代码方案 #

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

# 循环加载更多商品，直到按钮消失
while True:
    try:
        # 等待所有walla-button元素加载完成
        walla_buttons = WebDriverWait(driver, 10).until(
            EC.presence_of_all_elements_located((By.CSS_SELECTOR, "walla-button"))
        )
        
        target_button = None
        # 遍历所有walla-button，找到包含目标文本的按钮
        for btn in walla_buttons:
            shadow_root = driver.execute_script('return arguments[0].shadowRoot', btn)
            if not shadow_root:
                continue
            # 通过按钮内的文本判断是否为目标按钮
            button_text = shadow_root.find_element(By.CSS_SELECTOR, ".walla-button__text").text.strip()
            if button_text == "Ver más productos":
                target_button = shadow_root.find_element(By.CSS_SELECTOR, "button.walla-button__button")
                break
        
        if target_button:
            # 滚动到按钮可视区域，避免因元素不可见点击失败
            driver.execute_script("arguments[0].scrollIntoView({block: 'center'});", target_button)
            time.sleep(1)
            target_button.click()
            # 等待新内容加载完成（通过旧元素失效判断）
            WebDriverWait(driver, 15).until(
                EC.staleness_of(walla_buttons[0])
            )
        else:
            print("未找到加载更多按钮，或已加载全部商品")
            break
    except Exception as e:
        print(f"加载过程出错: {str(e)}")
        break

关键改进点 #

• 显式等待：确保元素渲染完成后再操作，避免页面加载慢导致的查找失败
• 精准定位：通过按钮内的文本Ver más productos匹配目标元素，避免误触其他walla-button
• 滚动处理：将按钮滚动到可视区域后再点击，解决元素不可见导致的点击无效问题
• 加载等待：等待新内容加载完成后再进入下一次循环，防止重复点击或漏加载

内容的提问来源于stack exchange，提问作者Sergio Sánchez