Xpath提取ASOS商品价格返回null，如何正确抓取该数据？

你当前代码返回null的核心原因是ASOS平台的商品价格为客户端动态渲染内容，初始返回的静态HTML中不存在你要抓取的current-price类元素，该元素是页面加载完成后通过JavaScript异步请求接口数据后填充到页面上的，直接解析静态响应自然无法匹配到对应元素。

以下是两种可落地的解决方法： #

方案1：直接调用商品数据接口（最稳定高效） #

从你提供的XHR请求截图可以看到，页面加载过程中会主动请求官方的商品详情接口，返回的结构化JSON数据里直接包含完整价格字段，不需要解析HTML元素：

• 接口地址格式为：https://www.asos.com/api/product/catalogue/v3/products/[商品ID]?store=COM&currency=GBP，你要抓取的商品ID是页面URL里的23590636，直接请求该接口即可直接提取价格
• 请求时需要携带和浏览器一致的User-Agent请求头，避免被平台拦截

示例代码（Python Scrapy 为例）：

# 从页面URL中提取商品ID
product_id = response.url.split('/prd/')[1].split('?')[0]
api_url = f'https://www.asos.com/api/product/catalogue/v3/products/{product_id}?store=COM&currency=GBP'
# 发起接口请求
yield scrapy.Request(
    api_url,
    headers={
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
    },
    callback=self.parse_price
)

def parse_price(self, response):
    product_data = response.json()
    # 直接提取结构化价格数据
    current_price = product_data['price']['current']['text']
    yield {'price': current_price}

方案2：使用JS渲染工具加载页面后解析 #

如果不想适配接口，可以使用支持JavaScript渲染的爬取工具，等页面完全加载完成后再用你原来的XPath提取元素：

• Scrapy项目可以集成scrapy-playwright/scrapy-splash组件，开启JS渲染后即可匹配到current-price元素
• 独立脚本可以用selenium/playwright模拟浏览器访问，等待元素加载完成后提取内容

示例代码（Selenium 为例）：

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

driver = webdriver.Chrome()
driver.get('https://www.asos.com/monki/monki-lisa-cropped-vest-top-with-ruched-side-in-black/prd/23590636?colourwayid=60495910&cid=2623')
# 等待价格元素加载完成再提取
price_element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.XPATH, '//*[contains(@class, "current-price")]'))
)
current_price = price_element.text
print(current_price)
driver.quit()

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