如何将变量传递给 evaluate 函数？

Question

我正在尝试将一个变量传递到 Puppeteer 中的 page.evaluate() 函数中，但是当我使用以下非常简化的示例时，变量 evalVar 是未定义的。

我找不到任何可构建的示例，因此我需要帮助将该变量传递到page.evaluate()函数中，以便我可以在内部使用它。

const puppeteer = require('puppeteer');

(async() => {

  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const evalVar = 'WHUT??';

  try {

    await page.goto('https://www.google.com.au');
    await page.waitForSelector('#fbar');
    const links = await page.evaluate((evalVar) => {

      console.log('evalVar:', evalVar); // appears undefined

      const urls = [];
      hrefs = document.querySelectorAll('#fbar #fsl a');
      hrefs.forEach(function(el) {
        urls.push(el.href);
      });
      return urls;
    })
    console.log('links:', links);

  } catch (err) {

    console.log('ERR:', err.message);

  } finally {

    // browser.close();

  }

})();

- Cat Burston

Answer 1

你需要将变量作为参数传递给pageFunction，就像这样：

const links = await page.evaluate((evalVar) => {

  console.log(evalVar); // 2. should be defined now
  ...

}, evalVar); // 1. pass variable as an argument

你可以通过向 page.evaluate() 传递更多的参数来传递多个变量：

await page.evaluate((a, b c) => { console.log(a, b, c) }, a, b, c)

参数必须是可序列化为JSON的对象或浏览器内对象的JSHandle：https://pptr.dev/#?show=api-pageevaluatepagefunction-args。

- flozia

---

你好，如何传递多个变量？ - chitzui

另外，我无法传递一个函数： var myFunction = function() { console.log("hello") }; await page.evaluate(func => func(), myFunction); 会返回错误：Evaluation failed: TypeError: func is not a function.. 为什么？ - chitzui

不要忘记在函数参数签名中和作为传递给 evaluate 的参数末尾都输入 evalVar（在代码示例的末尾）。 - Flimm

你无法将函数直接传递给 pate.evaluate()。据说你可以通过 page.exposeFunction 来“公开”它。了解更多，请参见 https://dev59.com/Jbbna4cB1Zd3GeqPbHVq#58040978。 - knod

晚到派对了，但是@chitzui，evalVar可以是一个数组，因此您可以在那里传递多个值。 - Dominik Matis

Answer 2

我鼓励您坚持这种风格，因为它更加方便和易读。

let name = 'jack';
let age  = 33;
let location = 'Berlin/Germany';

await page.evaluate(({name, age, location}) => {

    console.log(name);
    console.log(age);
    console.log(location);

},{name, age, location});

- Mehdi Raash

---

我不确定这种方式是否比直接传递变量更方便和易读，就像这里所展示的那样。这只是分配和解构一个对象，增加了垃圾回收活动并添加了更多大括号。虽然这并不是什么大问题，但也没有太大改进，因为主要问题在于OP根本没有传递参数。 - ggorlen

在这种情况下，不同意、分配和销毁数组是一个大问题，但虚拟机可以进行优化。这种风格的优点在于您不需要关注变量插入的顺序，因此您可以根据需要检索变量（属性）。 - Mehdi Raash

对象的数量并不是什么大问题。 - Mehdi Raash

我之前没有考虑过重新排序，但那似乎是一个相当无意义的特性——我觉得调用像 fn(({baz, foo, quux}) => ..., {foo, quux, baz}) 这样的函数不太直观。如果我真的想要更改顺序，我会在两个地方进行更改，这样代码就可以一致地阅读。再次强调，所有这些都相当次要，但这正是重点——答案让它看起来像是一个巨大的优势，并没有真正解释你可以很容易地使用多个参数，或者最后一个参数是将上下文参数传递到回调中的地方，这是 OP 的根本问题。 - ggorlen

Answer 3

单变量：

您可以使用以下语法将一个变量传递给page.evaluate()：

await page.evaluate(example => { /* ... */ }, example);

注意：除非您将要传递多个变量，否则您不需要在()中包含变量。

多个变量：

您可以使用以下语法将多个变量传递给page.evaluate()：

await page.evaluate((example_1, example_2) => { /* ... */ }, example_1, example_2);

注意：将变量括在{}中不是必需的。

- Grant Miller

Answer 4

我花了相当长的时间才弄清楚，evaluate()中的console.log()不能在node控制台中显示。

参考：https://github.com/GoogleChrome/puppeteer/issues/1944

在页面.evaluate函数内运行的所有内容都是在浏览器页面上下文中完成的。该脚本在浏览器中运行，而不是在Node.js中运行，因此如果记录日志，将在浏览器的控制台中显示，如果您正在无头运行，则将看不到。您还无法在该函数内设置一个Node断点。

希望这可以帮助到您。

- harrrrrrry

---

如果您添加一个监听器，您可以在Node控制台中显示浏览器日志。请参阅此链接。 - ggorlen

Answer 5

要传递一个函数，有两种方法可以做到。

// 1. Defined in evaluationContext
await page.evaluate(() => {
  window.yourFunc = function() {...};
});
const links = await page.evaluate(() => {
  const func = window.yourFunc;
  func();
});


// 2. Transform function to serializable(string). (Function can not be serialized)
const yourFunc = function() {...};
const obj = {
  func: yourFunc.toString()
};
const otherObj = {
  foo: 'bar'
};
const links = await page.evaluate((obj, aObj) => {
   const funStr = obj.func;
   const func = new Function(`return ${funStr}.apply(null, arguments)`)
   func();

   const foo = aObj.foo; // bar, for object
   window.foo = foo;
   debugger;
}, obj, otherObj);

您可以将 devtools: true 添加到测试的启动选项中。

- wolf

---

我想传递一个对象？ - nanquim

你如何在第二种情况下添加一个参数？比如我想传递一个字符串给yourFunc。 - user3568719

如果你的属性不是一个函数，你可以用对象替换yourFunc。@tramada - wolf

func与youFunc类似，因此您可以像执行yourFunc一样调用func(stringArg)。 - wolf

你介意展示一下如何将一个对象传递给窗口并访问它吗？ - wuno

@wuno 就像第二个例子一样。 - wolf

Answer 6

我有一个TypeScript的例子，可以帮助新手更好地了解TypeScript。

const hyperlinks: string [] = await page.evaluate((url: string, regex: RegExp, querySelect: string) => {
.........
}, url, regex, querySelect);

- Srinivas Reddy Thatiparthy

---

你如何在 TypeScript 中运行 puppeteer？每次修改代码时都需要转译为 JS 吗？ - avalanche1

是的。您可以在此处查看该项目 - https://github.com/srinivasreddy/companies-list - Srinivas Reddy Thatiparthy

你的回答帮助我弄清如何传递参数给 $eval： page.$eval(selector, (element, attribute) => element.getAttribute(attribute), attribute);。 - Erwol

Answer 7

与@wolf上面的答案略有不同。使代码在不同的上下文之间更具可重用性。

// util functions
export const pipe = (...fns) => initialVal => fns.reduce((acc, fn) => fn(acc), initialVal)
export const pluck = key => obj => obj[key] || null
export const map = fn => item => fn(item)
// these variables will be cast to string, look below at fn.toString()

const updatedAt = await page.evaluate(
  ([selector, util]) => {
    let { pipe, map, pluck } = util
    pipe = new Function(`return ${pipe}`)()
    map = new Function(`return ${map}`)()
    pluck = new Function(`return ${pluck}`)()

    return pipe(
      s => document.querySelector(s),
      pluck('textContent'),
      map(text => text.trim()),
      map(date => Date.parse(date)),
      map(timeStamp => Promise.resolve(timeStamp))
    )(selector)
  },
  [
    '#table-announcements tbody td:nth-child(2) .d-none',
    { pipe: pipe.toString(), map: map.toString(), pluck: pluck.toString() },
  ]
)

另外需要注意的是，管道内部的函数不能使用类似这样的东西。

// incorrect, which is i don't know why
pipe(document.querySelector) 

// should be 
pipe(s => document.querySelector(s))

- Azriz