Puppeteer Page.$$eval()返回空数组问题求助

可能原因及解决方案 #

1. 动态内容加载时机不匹配 #

• 分类页的链接大概率是AJAX异步加载或懒加载渲染的，page.waitForSelector()仅等待首个匹配元素出现，但目标链接可能还未完全生成。可以改用page.waitForFunction()等待元素数量达到预期值：

  await page.waitForFunction(() => document.querySelectorAll('.target-link-selector').length > 0);
  

• 跳转时指定更严格的加载完成条件，比如networkidle2（仅2个以下网络连接持续500ms），同时延长超时时间：

  await page.goto(categoryPageUrl, { waitUntil: 'networkidle2', timeout: 60000 });
  

2. 选择器定位不准确 #

• Walgreens分类页的DOM结构可能和首页差异较大，直接复用首页选择器会失效。打开Chrome DevTools，右键目标链接元素复制完整CSS选择器，避免依赖动态生成的class或过于宽泛的标签选择器。
• 检查目标元素是否嵌套在iframe中，如果是，需先切换到对应iframe再操作：

  const targetFrame = page.frames().find(frame => frame.name() === 'content-frame');
  if (targetFrame) {
    await targetFrame.waitForSelector('.target-link-selector');
    const links = await targetFrame.$$eval('.target-link-selector', els => els.map(el => el.href));
  }
  

3. 反爬机制限制 #

• Walgreens可能通过检测请求特征拦截爬虫，尝试以下调整：
  • 设置真实浏览器的User-Agent：

    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.waitForTimeout(Math.random() * 2000 + 1000); // 1-3秒随机等待
    

  • 启用页面缓存，减少重复请求触发的反爬：

    await page.setCacheEnabled(true);
    

4. 页面跳转上下文未同步 #

• 如果是通过点击首页链接跳转分类页，必须确保跳转完成后再执行爬取逻辑，建议用Promise.all()绑定点击和导航事件：

  await Promise.all([
    page.click('.home-category-link'),
    page.waitForNavigation({ waitUntil: 'networkidle2' })
  ]);
  // 跳转完成后再调用$$eval
  const links = await page.$$eval('.target-link-selector', els => els.map(el => el.href));
  

5. 超时问题排查 #

• 超时通常是因为等待的选择器从未出现，或页面加载异常。捕获超时错误并打印当前页面内容，排查是否被反爬拦截或DOM结构变更：

  try {
    await page.waitForSelector('.target-link-selector', { timeout: 60000 });
  } catch (err) {
    console.log('等待选择器超时，页面快照:', await page.content());
  }
  

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