如何将变量传递给评估函数？答案

【问题标题】：How can I pass variable into an evaluate function?如何将变量传递给评估函数？
【发布时间】：2017-09-07 05:17:33
【问题描述】：

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

我是 Puppeteer 的新手，找不到任何可以构建的示例，因此我需要帮助将该变量传递给 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();

  }

})();

【问题讨论】：

标签： javascript web-scraping evaluate puppeteer

【解决方案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 或浏览器内对象的JSHandles：https://pptr.dev/#?show=api-pageevaluatepagefunction-args

【讨论】：

您好，您如何传递多个变量？
另外，我不能真正传递函数： var myFunction = function() { console.log("hello") };等待 page.evaluate(func => func(), myFunction);给我：Evaluation failed: TypeError: func is not a function.. 为什么？
不要忘记在函数参数签名中输入evalVar，并作为传递给evaluate的参数（在代码示例的末尾）。
@chitzui：你不能将函数传递给pate.evaluate()。据说你可以用page.exposeFunction“暴露”它。有关更多信息，请参阅stackoverflow.com/a/58040978。
迟到了，但是@chitzui, evalVar 可以是一个数组，所以你可以传递多个值

【解决方案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});

【讨论】：

我不清楚这是否比直接传递变量更方便或更易读，如here 所示。这只是分配和解构一个对象，增加垃圾收集活动并添加更多大括号。当主要问题是 OP 根本没有传递参数时，这没什么大不了的，但也没有太大的改进。
不同意，在这种情况下分配和销毁数组是一件大事，但是VM对其进行了优化。这种风格的优点是你不关心变量插入的顺序。因此您可以根据需要检索变量（属性）。
* 个对象没什么大不了的
我没有考虑过重新排序，但这似乎是一个毫无意义的特征——调用像fn(({baz, foo, quux}) => ..., {foo, quux, baz}) 这样的函数让我觉得不太直观。如果我真的想更改顺序，我只需在两个地方执行此操作，以便代码读取一致。同样，所有这些都很次要，但这就是重点——答案使它看起来像是一个巨大的胜利，并没有真正解释你可以很容易地使用多个参数，或者最后一个参数是上下文参数的位置传入回调，这是OP的根本问题。

【解决方案3】：

单变量：

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

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

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

多变量：

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

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

注意：不需要将变量包含在{} 中。

【讨论】：

【解决方案4】：

我花了很长时间才发现evaluate() 中的console.log() 无法在节点控制台中显示。

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

在 page.evaluate 函数中运行的一切都是在浏览器页面的上下文中完成的。该脚本在浏览器中运行，而不是在 node.js 中，因此如果您登录，它将显示在浏览器控制台中，如果您以无头方式运行，您将看不到。你也不能在函数内部设置节点断点。

希望这能有所帮助。

【讨论】：

【解决方案5】：

要传递function，有两种方法可以做到。

// 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 进行测试

【讨论】：

我想传递一个对象？
在第二种情况下如何添加参数？例如，我想向 yourFunc 添加一个字符串
如果您的属性不是函数，您可以将yourFunc 替换为对象。 @tramada
func 类似于 youFunc，所以你可以像 exec yourFunc @user3568719 一样调用 func(stringArg)
您介意展示如何将对象传递给窗口然后访问它吗？

【解决方案6】：

我有一个打字稿示例，可以帮助打字稿新手。

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

【讨论】：

如何在打字稿中运行puppeteer？每次修改代码都转成js吗？
是的。你可以在这里看看这个项目 - github.com/srinivasreddy/companies-list
您的回答帮助我弄清楚如何将参数传递给$eval:page.$eval(selector, (element, attribute) => element.getAttribute(attribute), attribute);。
@Erwol 很高兴为您提供帮助。

【解决方案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))

【讨论】：