我试图在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();

  }

})();

当前回答

我花了很长时间才弄清楚evaluate()中的console.log()不能在节点控制台中显示。

裁判:https://github.com/GoogleChrome/puppeteer/issues/1944

在页面内运行的所有内容。求值函数是在浏览器页面上下文中完成的。脚本在浏览器中运行,而不是在node.js中运行,所以如果你登录,它将显示在浏览器控制台,如果你是无头运行,你将看不到。也不能在函数内部设置节点断点。

希望这能有所帮助。

其他回答

与上面@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))

我有一个typescript的例子,可以帮助一些新的typescript。

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

对于传递函数,有两种方法。

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

您可以在test的启动选项中添加devtools: true

我鼓励您坚持使用这种样式,因为它更方便、更易读。

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

我花了很长时间才弄清楚evaluate()中的console.log()不能在节点控制台中显示。

裁判:https://github.com/GoogleChrome/puppeteer/issues/1944

在页面内运行的所有内容。求值函数是在浏览器页面上下文中完成的。脚本在浏览器中运行,而不是在node.js中运行,所以如果你登录,它将显示在浏览器控制台,如果你是无头运行,你将看不到。也不能在函数内部设置节点断点。

希望这能有所帮助。