Puppeteer中page.evaluate用变量作选择器报引用错误问题咨询

这个问题我太熟了！本质是Node.js环境和浏览器环境的上下文隔离搞的鬼——page.evaluate()里的回调函数是跑在浏览器自己的JS引擎里的，而你定义的LAST_UPDATE_SELECTOR是在Node.js的环境中，这俩环境完全不互通，浏览器那边根本不知道这个变量存在，自然会报"LAST_UPDATE_SELECTOR is not defined"的错误。

两种靠谱的解决方法： #

方法1：把变量作为参数传入page.evaluate()

这是最安全、推荐的写法，能避免字符串拼接可能带来的问题：

// 先在Node环境定义选择器变量
const LAST_UPDATE_SELECTOR = 'body > table > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(3) > td:nth-child(2) > strong';

// 把变量作为第二个参数传给evaluate，回调函数里就能拿到它了
const lastUpdate = await page.evaluate((selector) => {
  return document.querySelector(selector).textContent;
}, LAST_UPDATE_SELECTOR);

方法2：用模板字符串预拼接选择器字符串

如果你的选择器里没有单引号（或者已经转义了），也可以直接在Node环境把选择器字符串拼好，再传给浏览器执行：

const LAST_UPDATE_SELECTOR = 'body > table > tbody > tr:nth-child(2) > td > table > tbody > tr:nth-child(3) > td:nth-child(2) > strong';

const lastUpdate = await page.evaluate(`
  document.querySelector('${LAST_UPDATE_SELECTOR}').textContent
`);

不过这种写法要注意：如果选择器本身包含单引号，会导致字符串语法错误，所以方法1更稳妥。

为什么你直接写选择器字符串就能正常运行？因为那时候选择器字符串是直接写在回调函数内部的，属于浏览器环境的代码，自然能被正确识别~

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