Question

我试图将变量传递到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();

  }

})();

Answer 1

您必须将变量作为参数传递给pageFunction，如下所示：

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

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

}, evalVar);

参数也可以序列化：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args。

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});

Answer 3

单个变量：

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

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

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

多个变量：

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

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

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

Answer 4

要通过function，可以通过两种方式进行。

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


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

Answer 5

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

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

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

希望这会有所帮助。

Answer 6

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

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

Answer 7

使用page.$$eval

//..
const page = await browser.newPage();
const hrefs = await page.$$eval('#fbar #fsl a', as => as.map(a => a.href));
console.log(hrefs);
//..

[另请参见page.$eval中的单个选择器]

Puppeteer：在.evaluate（）中传递变量

7 个答案:

单个变量：

多个变量：