SoftSurroundings网站多尺码类别数据爬取问题求助

情况1：隐藏尺码已存在于初始DOM（仅CSS隐藏） #

若Petites、Women类别的尺码只是通过CSS（如display:none）隐藏，并未从DOM中移除，可直接修改CSS选择器捕获所有尺码：

raw_skus = []
# 匹配所有尺码容器，忽略可见状态
for sku_sel in response.css('.dtlFormBulk.flexItem .box.size'):
    sku = {
        'sku_id': sku_sel.css('::attr(id)').get(),
        'size': sku_sel.css('::text').get(strip=True)
    }
    # 过滤空值（避免无效数据）
    if sku['size']:
        raw_skus.append(sku)
return raw_skus

说明： #

• 原选择器.size[class="box size"]可简化为.box.size，无需重复嵌套.size选择器；
• 直接使用::attr(id)和::text即可获取目标属性，无需额外层级选择。

情况2：尺码为动态加载（点击类别后才渲染） #

若其他类别的尺码不在初始DOM中，需模拟交互触发加载，或直接抓取后端API数据：

方案A：Scrapy + Playwright 模拟点击 #

1. 依赖安装：

pip install scrapy-playwright

2. 启用Playwright中间件（在settings.py中添加）：

DOWNLOAD_HANDLERS = {
    "http": "scrapy_playwright.handler.ScrapyPlaywrightDownloadHandler",
    "https": "scrapy_playwright.handler.ScrapyPlaywrightDownloadHandler",
}
PLAYWRIGHT_LAUNCH_OPTIONS = {"headless": True}

3. 爬虫代码修改：

async def parse(self, response):
    raw_skus = []
    page = response.meta["playwright_page"]
    
    # 定义所有需要抓取的尺码类别
    size_categories = ["Misses", "Petites", "Women"]
    for category in size_categories:
        # 点击切换到对应类别（需根据页面实际按钮选择器调整）
        await page.click(f'button:text-is("{category}")')
        # 等待尺码元素加载完成
        await page.wait_for_selector('.box.size')
        
        # 提取当前类别的尺码数据
        category_skus = await page.query_selector_all('.box.size')
        for sku_elem in category_skus:
            sku_id = await sku_elem.get_attribute('id')
            size = await sku_elem.text_content()
            if size:
                raw_skus.append({
                    'sku_id': sku_id,
                    'size': size.strip(),
                    'category': category  # 可选：添加类别标识
                })
    
    await page.close()
    return raw_skus

方案B：直接抓取API接口（更高效） #

打开浏览器开发者工具（F12）→ 网络标签，切换尺码类别时观察XHR请求，找到返回全量尺码数据的API接口（通常为JSON格式），直接请求该接口获取所有类别尺码，无需模拟交互。

快速验证方法 #

在浏览器控制台输入以下命令，确认是否能捕获所有尺码：

document.querySelectorAll('.box.size')

• 返回元素包含全部3类尺码 → 用情况1的方案；
• 仅返回Misses类别的尺码 → 用情况2的方案。

内容的提问来源于stack exchange，提问作者Malik Zohaib Mustafa