使用Puppeteer等待阿迪达斯动态产品尺码元素加载失败的解决方法

你的代码超时的核心原因是动态尺码的加载逻辑需要更精准的等待策略，或是遭遇了反爬拦截，以下是具体修复方案：

1. 修正选择器与加载等待策略 #

首先确保选择器完全匹配HTML类名（CSS选择器大小写敏感），同时调整页面加载的等待规则，避免domcontentloaded过早结束等待：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // 开启可视化模式方便排查问题
  const page = await browser.newPage();

  // 模拟真实浏览器UA，规避反爬拦截
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');

  // 延长超时时间，等待网络请求基本完成
  await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });

  // 等待尺码按钮出现且内容非空（确保不是占位符）
  await page.waitForFunction(() => {
    const sizeBtn = document.querySelector('.sizes___3Stmf button');
    return sizeBtn && sizeBtn.textContent.trim() !== '';
  }, { timeout: 60000 });

  // 获取所有尺码文本
  const sizes = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.sizes___3Stmf button span'))
      .map(span => span.textContent.trim());
  });

  console.log('已获取尺码:', sizes);
  await browser.close();
})();

2. 额外注意事项 #

• 颜色前置选择：部分阿迪达斯商品需要先选择颜色才会加载对应尺码，若目标商品属于此类，需先模拟点击颜色选项：

  // 等待颜色选择器加载并点击第一个颜色
  await page.waitForSelector('.color___1s7HG button');
  await page.click('.color___1s7HG button:nth-child(1)');
  // 再执行后续的尺码等待逻辑
  

• 反爬规避：若仍出现超时，可添加模拟人类操作的代码降低被拦截概率：

  // 模拟滚动页面
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(1000); // 延迟1秒
  

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