如何抓取Nike促销页hover触发的多色款商品URL 解决BeautifulSoup抓取局限

问题描述 #

目标抓取页面：https://www.nike.com/w/sale-3yaep
当前仅使用BeautifulSoup只能提取到商品默认配色对应的URL，无法获取hover切换配色后生成的不同商品URL。
示例效果：

#

核心原因 #

这一问题的本质是该类数据属于前端动态渲染内容，不会包含在页面初始返回的静态HTML中，只有当用户hover触发对应交互时，才会由JS加载更新对应数据，仅做静态HTML解析的BeautifulSoup无法获取这部分动态生成的内容。

可行解决方案 #

方案1：直接抓取商品列表接口（优先推荐，效率最高） #

• 打开目标页面后按F12调出开发者工具，切换到「网络」面板，筛选Fetch/XHR类型的请求，刷新页面后找到返回商品列表数据的接口
• 接口返回的JSON结构中一般会直接包含单款商品所有配色对应的完整URL字段，直接提取即可，无需处理任何页面交互，抓取效率远高于模拟浏览器方案

方案2：浏览器自动化模拟交互（适合接口加密难解析的场景） #

如果接口做了加密参数校验难以直接抓取，可以用Selenium、Playwright这类工具模拟用户操作实现数据提取，核心逻辑如下：

1. 启动浏览器加载目标页面，等待商品列表完全渲染
2. 遍历所有商品卡片，模拟鼠标hover到卡片上唤起配色选择栏
3. 依次hover到每个配色选项上，直接提取地址栏更新后的URL，或者直接取配色节点绑定的商品链接属性
4. 对收集到的URL做去重处理即可
   核心参考代码：

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

driver = webdriver.Chrome()
driver.get("https://www.nike.com/w/sale-3yaep")
# 显式等待商品卡片加载完成，比固定sleep更稳定
wait = WebDriverWait(driver, 10)
product_cards = wait.until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".product-card__body")))

all_product_urls = set()
action = ActionChains(driver)

for card in product_cards:
    # hover唤起配色选择栏
    action.move_to_element(card).perform()
    # 等待配色选项加载
    color_options = wait.until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".colorway-item")))
    for opt in color_options:
        action.move_to_element(opt).perform()
        # 可加0.1-0.3秒延迟避免URL未完成更新就提取
        all_product_urls.add(driver.current_url)

print(list(all_product_urls))
driver.quit()

注意事项 #

• 频繁请求会触发Nike的反爬校验，建议添加合理的访问间隔，必要时搭配代理IP池使用，避免被封IP
• 官网可能随时更新DOM结构，代码中的CSS选择器需要根据实际页面情况调整

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