Puppeteer技术问题：如何向page.evaluate传递参数？

问题背景 #

你原本有一段能正常运行的代码，直接在page.evaluate里用固定值更新元素内容：

await page.evaluate(
    () =>
      (document.querySelector(
        "selector"
      ).innerHTML = "WHATEVER")
);

但现在需要把外部变量传入page.evaluate，尝试后出现ReferenceError: val is not defined的错误：

const value = "WHATEVER"
async function setValue(val) {
    console.log(val) // 正常输出
    await page.evaluate(
      () =>{
        console.log(val) // 报错：val未定义
        document.querySelector("selector").innerHTML = val
      }
    );
}
await setValue(value)

为什么val未定义？ #

page.evaluate的回调函数运行在浏览器的独立上下文中，和你的Node.js代码环境完全隔离。Node环境里的val变量无法直接被浏览器上下文访问，因此会抛出未定义的错误。

正确传递参数的方法 #

方法1：通过page.evaluate的后续参数传递（推荐） #

把需要传入的变量作为page.evaluate的第二个及以后的参数传入，回调函数中对应接收即可：

const value = "WHATEVER"
async function setValue(val) {
    console.log(val)
    await page.evaluate(
      (innerVal) => { // 接收浏览器上下文的参数
        console.log(innerVal)
        document.querySelector("selector").innerHTML = innerVal
      },
      val // 将Node环境的val传递到浏览器上下文
    );
}
await setValue(value)

方法2：利用闭包传递（不推荐） #

部分Puppeteer版本支持通过闭包直接引用外部变量，但这种方式依赖变量序列化机制，遇到函数、Symbol等无法序列化的对象时会失效，所以仅适合简单场景：

const value = "WHATEVER"
async function setValue(val) {
    console.log(val)
    await page.evaluate(() => {
        document.querySelector("selector").innerHTML = val
    });
}
await setValue(value)

替代方案 #

使用page.$eval（单元素操作） #

page.$eval是更简洁的API，直接选择单个元素并执行操作，同时支持传递参数：

const value = "WHATEVER"
async function setValue(val) {
    await page.$eval("selector", (el, innerVal) => {
        el.innerHTML = innerVal
    }, val);
}
await setValue(value)

它相当于自动帮你完成document.querySelector的操作，再把元素和参数传给回调函数。

使用page.$$eval（多元素操作） #

如果需要批量操作多个匹配的元素，可以用page.$$eval（对应document.querySelectorAll）：

const value = "WHATEVER"
async function setValue(val) {
    await page.$$eval("selector", (els, innerVal) => {
        els.forEach(el => el.innerHTML = innerVal)
    }, val);
}
await setValue(value)

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