嘿，这个坑我之前踩过！你遇到的ReferenceError: element is not defined错误，核心原因是Puppeteer的page.evaluate()存在上下文隔离机制——你在Node.js环境里定义的element变量，没办法直接被浏览器页面上下文里的回调函数访问到。

page.evaluate()的回调函数是在浏览器的页面环境中执行的，和你的Node.js代码运行在完全独立的上下文中，两者的变量不能直接共享，所以回调里找不到element这个变量，就触发了引用错误。

解决思路1：给page.evaluate()传递参数 #

你可以把element作为参数传递给page.evaluate()，第二个及以后的参数会被自动注入到浏览器上下文的回调函数中，修改后的代码如下：

const getContent = async (page, element) => { 
  const contentStr = await page.evaluate((selector) => { 
    const contentEl = document.querySelector(selector); 
    const content = contentEl?.getAttribute("content"); 
    // 简化判断逻辑
    return content?.length > 0 ? content : null; 
  }, element); // 把element作为参数传入浏览器上下文
  return contentStr; 
};

这里我们把element改名为selector作为回调的参数，明确区分两个上下文的变量，避免混淆。

解决思路2：用page.$eval()简化代码 #

Puppeteer提供了更简洁的page.$eval()方法，专门用于查询单个元素并处理逻辑，它会自动处理元素不存在的情况（需要捕获错误保持原逻辑），代码更紧凑：

const getContent = async (page, element) => { 
  try {
    return await page.$eval(element, el => {
      const content = el.getAttribute("content");
      return content?.length > 0 ? content : null;
    });
  } catch (err) {
    // 元素不存在时$eval会抛出错误，捕获后返回null，和原逻辑一致
    return null;
  }
};

这个方法会帮你自动执行document.querySelector()，直接把查询到的元素传给回调函数，省去了你手动查询的步骤。

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