Puppeteer调用page.evaluate时出现k未定义的ReferenceError如何修复

报错根因 #

你使用的是Puppeteer的page.evaluate()方法，这个方法的回调函数是在浏览器端上下文执行的，和你编写代码的Node.js上下文完全隔离，Node环境中定义的循环变量k默认不会自动传入浏览器上下文，所以浏览器执行代码时找不到k变量，就抛出了未定义报错。

修复方法 #

page.evaluate支持传入自定义参数，只需要把你需要用到的外部变量作为page.evaluate的入参传递给回调即可，修改后的代码如下：

let imageURL = [];

// 注意：querySelectorAll返回的集合索引从0开始，如果你的需求确实要从第1个元素开始取可以保留k=1，否则建议k从0开始
for (let k = 1; k < images.length; k++) {
  // 把k作为第二个参数传入page.evaluate，回调的参数就能接收到这个值
  let data = await page.evaluate((index) => {
    const liList = document.querySelectorAll('#__layout > main > div.nuxt-container > div > div:nth-child(3) > div.item-container > div:nth-child(72) > div > div.body > div.image-container > ul > li');
    let innerHTML = liList[index].innerHTML;
    let startIndex = innerHTML.indexOf('&quot;') + 6;
    let endIndex = innerHTML.lastIndexOf('&quot;');
    let imageLink = innerHTML.substring(startIndex, endIndex);

    return {
      image: imageLink,
    };
  }, k); // 这里把外部的k变量传给evaluate的回调
  imageURL.push(data);
}

额外优化建议 #

• 原来的循环条件k <= images.length存在数组越界风险，集合的最大索引是length-1，建议改成k < images.length
• 可以直接在浏览器上下文取img标签的src属性，不需要手动切割innerHTML的引号，代码更可靠，示例如下：

  // evaluate内部的逻辑可以替换为
  const img = liList[index].querySelector('img');
  return { image: img.src }
  

• 批量抓取时建议加错误捕获，避免单张图片抓取失败导致整个流程中断。

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