将 thunk 传递给 puppeteer 的 $.eval答案

【问题标题】：Passing a thunk to puppeteer's $.eval将 thunk 传递给 puppeteer 的 $.eval
【发布时间】：2018-11-12 10:42:21
【问题描述】：

函数setValue接收一个值并返回一个函数。在第二个函数中，我试图控制台记录 value 的值，但我得到了

Error: Evaluation failed: ReferenceError: value is not defined

我的代码如下。它可以在try-puppeteer 上进行测试，只需复制并粘贴我的代码并删除require 语句。

const puppeteer = require('puppeteer');

(async () => {
  const USERNAME = 'helloworld';
  const setValue = (value) => (input) => { console.log(value) };

  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('http://example.com');
  await page.$eval('.selector', setValue(USERNAME));

  await browser.close();
})();

【问题讨论】：

标签： javascript node.js puppeteer google-chrome-headless

【解决方案1】：

这是在 Node.js 中执行并在浏览器中评估代码的任何库（量角器、TestCafe、Nightmare 等）中常见的问题。函数被字符串化并作为字符串传递给浏览器。 (input) => { console.log(value) } 的原始范围丢失了，value 预计是一个未定义的全局范围。

正如the documentation 所提到的，应该将其他参数传递给$eval。

应该是：

await page.$eval('.selector', (el, value) => { console.log(value) }, USERNAME);

console.log 可以工作，但显然不会在 Node 控制台中显示任何内容，因为它指的是浏览器控制台。

【讨论】：