使用Puppeteer的$$eval返回undefined，寻求解决方案

我尝试通过网页抓取获取元素的链接与ID，但使用page.$$eval时返回undefined。确认.result-item-v3类存在，因为用page.evaluate能正常获取该类元素，而且$$eval里的console.log没有输出。

问题代码 #

const flats = await page.$$eval(".result-item-v3", (elements) => {
  console.log(elements.length);
  return elements.forEach((element) => {
    return {
      link: element.querySelector(".object-image-link").getAttribute("href"),
      id: element.attributes.id.value,
    };
  });
});

console.log(flats);

可正常运行的对比代码 #

以下使用相同类名的代码可正常运行：

const flatsHashId = await newPage.evaluate(() =>
  [...document.querySelectorAll(".result-item-v3")].map(
    (elem) => elem.attributes.id.value
  )
);

解决方案 #

问题核心是forEach方法的特性——它遍历数组时不会返回任何值（默认返回undefined），而你需要返回一个包含抓取数据的数组。

把代码里的forEach替换成map即可解决，map会遍历数组并返回新的结果数组，和你正常运行的代码逻辑一致：

修改后的代码：

const flats = await page.$$eval(".result-item-v3", (elements) => {
  console.log(elements.length);
  return elements.map((element) => {
    return {
      link: element.querySelector(".object-image-link").getAttribute("href"),
      id: element.attributes.id.value,
    };
  });
});

console.log(flats);

另外注意：$$eval中的console.log是在浏览器上下文执行的，输出不会显示在你的Node.js控制台，要查看需打开浏览器开发者工具的控制台。

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