Selenium如何等待轮播图内图片完全加载且src属性有效填充

你当前代码的核心问题是driver.get()执行完成后立刻抓取页面源码做解析，此时轮播组件内的img标签虽已完成DOM挂载，但真实src属性由前端JS异步填充，等待外层容器存在、等待img标签挂载、固定时长休眠三类方案，都无法精准匹配src属性赋值完成的时机，必然存在偶发失败的概率。

实现思路 #

采用Selenium自定义显式等待逻辑，直接校验目标业务状态，不依赖间接关联的元素状态判断：

• 第一步先等待轮播外层容器完成挂载，将容器滚动到页面视口中间位置，触发可能存在的图片懒加载逻辑，避免图片因未进入可视区域始终不加载
• 自定义等待轮询规则：每次检查轮播容器内的所有img标签，确认标签携带非空、非占位资源的有效src属性，直到满足预设的有效图片数量阈值、或等待超时才终止轮询
• 必须等等待条件校验通过后，再抓取页面源码交给BeautifulSoup解析，避免拿到DOM未更新完成的静态快照

修正后代码 #

from bs4 import BeautifulSoup
import json
from selenium import webdriver
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.set_preference("dom.webnotifications.enabled", False)
options.set_preference("dom.push.enabled", False)
driver = webdriver.Firefox(options=options)
driver.maximize_window()
driver.set_page_load_timeout(30)
# 可根据实际网络情况调整等待超时时间
wait = WebDriverWait(driver, 15)

driver.get("https://www.homedepot.com.mx/electrico/placas-y-dimmers/placas-decorativas/tapa-i-tipo-quinzino-apag-sencillo-461027")

# 等待轮播容器挂载
carousel_wrapper = wait.until(
    EC.presence_of_element_located((By.CSS_SELECTOR, 'div[data-test="carousel-wrapper"]'))
)
# 滚动到轮播区域，触发懒加载
driver.execute_script("arguments[0].scrollIntoView({block: 'center'});", carousel_wrapper)

# 自定义等待条件：轮播内图片全部完成src赋值
def carousel_imgs_with_valid_src(driver):
    img_tags = carousel_wrapper.find_elements(By.TAG_NAME, 'img')
    valid_src_count = 0
    for img in img_tags:
        src = img.get_attribute('src')
        # 过滤空值、base64占位图、加载中临时资源
        if src and not src.startswith('data:image') and 'loading' not in src.lower():
            valid_src_count += 1
    # 可根据需求调整有效图片阈值，示例为最多取6张
    return valid_src_count >= min(len(img_tags), 6)

# 等待条件满足后再解析页面
wait.until(carousel_imgs_with_valid_src)
prod_soup = BeautifulSoup(driver.page_source, "html.parser")

pics_json = ""
pictures = []
pictures_container = prod_soup.find(
    "div", {"data-test": "carousel-wrapper"}
)
if pictures_container:
    picture_tags = pictures_container.find_all("img")
    if picture_tags:
        max_pictures = 0
        for pic_tag in picture_tags:
            try:
                src = pic_tag["src"]
                # 二次过滤无效src，和等待逻辑保持一致
                if not src.startswith('data:image') and 'loading' not in src.lower():
                    pictures.append(src)
            except Exception as ex:
                print(ex)
            max_pictures = max_pictures + 1
            if max_pictures >= 6:
                break
        pics_json = json.dumps(pictures)

print(pics_json)
driver.quit()

适配说明 #

如果目标站点采用懒加载方案将真实图片地址存放在data-src、data-lazy-src这类自定义属性上，只需要在自定义等待逻辑、后续解析逻辑中，同步读取对应属性做校验和提取即可，不需要修改整体等待框架。

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