Google Puppeteer报错forEach is not a function及代码求助

这个报错的核心原因很明确：你尝试调用forEach的对象并不是一个可迭代的数组类型，大概率是类集合对象、null/undefined，或者误用了jQuery对象导致的。结合你的代码场景，我整理了几个最可能的排查方向：

1. 页面上下文获取的DOM集合不是数组 #

当你在页面上下文中用document.querySelectorAll()这类方法获取元素时，返回的是NodeList（或HTMLCollection）——这是一个类数组对象，虽然现代浏览器大多支持它的forEach，但有些旧环境或者特殊页面场景下可能不兼容，或者你误把它当成了纯数组。

举个例子，如果你的页面脚本里写了：

const items = document.querySelectorAll('.product-card');
items.forEach(item => { /* 处理逻辑 */ });

解决方法是把类数组转换为真正的数组：

// 方法1：用Array.from转换
const items = Array.from(document.querySelectorAll('.product-card'));
items.forEach(item => { /* 处理逻辑 */ });

// 方法2：用扩展运算符
const items = [...document.querySelectorAll('.product-card')];
items.forEach(item => { /* 处理逻辑 */ });

2. 误用jQuery对象调用forEach #

你代码里引入了jQuery，如果你用jQuery选择器获取元素（比如$('.product')），得到的是jQuery对象，它本身不支持原生的forEach方法，应该用jQuery自带的.each()：

错误写法：

$('.product').forEach(item => { /* 报错 */ });

正确写法：

$('.product').each(function(index, item) {
  // 处理逻辑，this指向当前元素
});

3. 获取的对象是null/undefined #

如果你的选择器写错了，或者元素还没加载完成，就会获取到null或undefined，调用forEach自然会报错。比如你用waitForSelector('#no-products')等待了某个元素，但如果你的脚本是处理其他商品元素，可能需要先等待对应的选择器出现：

// 先等待目标元素集合加载完成
await page.waitForSelector('.product-card');
// 再执行页面脚本
await page.evaluate(() => {
  const items = Array.from(document.querySelectorAll('.product-card'));
  items.forEach(item => { /* 处理逻辑 */ });
});

4. 确认变量类型 #

如果还是找不到问题，可以在页面脚本里打印变量的类型，帮你定位：

await page.evaluate(() => {
  const items = document.querySelectorAll('.product-card');
  console.log(typeof items); // 会输出"object"
  console.log(items instanceof Array); // 会输出false
  console.log(items instanceof NodeList); // 会输出true
});

通过上面几个方向排查，应该能快速定位到报错的根源。

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