Puppeteer中page.evaluate()调用外部函数失败的解决方案求助

核心问题原因 #

page.evaluate() 运行在浏览器沙盒环境中，无法直接访问Node.js进程内定义的函数；page.exposeFunction() 会将函数放到Node.js环境执行，自然无法获取DOM元素；addScriptTag 报错大概率是路径未处理正确，或是加载时机晚于evaluate调用。

可行解决方案 #

方案1：将函数转为字符串注入到evaluate中

把你的dataMapper函数转为字符串，在page.evaluate内部先定义该函数再调用，这样函数就运行在浏览器环境中，能正常访问DOM。

示例代码：

// 外部定义的dataMapper函数（需为纯浏览器兼容代码，不能使用Node.js专属API）
function dataMapper() {
  const elements = document.querySelectorAll('.target-item');
  return Array.from(elements).map(el => ({
    title: el.querySelector('.title').textContent.trim(),
    link: el.querySelector('a').href
  }));
}

// 在page.evaluate中注入并调用函数
const crawlResult = await page.evaluate((mapperStr) => {
  const mapper = new Function(`return ${mapperStr}`)();
  return mapper();
}, dataMapper.toString());

方案2：正确使用page.addScriptTag加载函数

如果想把dataMapper单独放在文件中，需确保使用绝对路径，借助Node.js的path模块处理，避免相对路径出错。

假设dataMapper.js和主脚本在同一目录：

const path = require('path');

// 先将脚本加载到浏览器全局环境
await page.addScriptTag({ path: path.resolve(__dirname, './dataMapper.js') });

// 直接在evaluate中调用全局函数
const crawlResult = await page.evaluate(() => dataMapper());

注意：dataMapper.js需要将函数暴露到全局：

// dataMapper.js内容
window.dataMapper = function() {
  // DOM处理逻辑
};

也可以用内联方式直接注入：

await page.addScriptTag({
  content: `${dataMapper.toString()}\nwindow.dataMapper = dataMapper;`
});

const crawlResult = await page.evaluate(() => dataMapper());

关键注意事项 #

• dataMapper函数不能使用任何Node.js专属API（如fs、path），必须是纯浏览器端可运行的代码。
• 使用addScriptTag时，必须确保脚本加载完成后再调用page.evaluate，await关键字不能省略。

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