在 Puppeteer 中使用 page.$eval() 时如何将变量放入浏览器上下文中？ [复制]

Question

我正在尝试运行这样的代码：

    const login = "login";
    await page.$eval('#LoginForm_username', el => el.value = login);

它在表单域中输入login 值。

但是，我不断收到一个奇怪的错误：

错误：评估失败：ReferenceError：未定义登录 在 puppeteer_evaluation_script:1:19 在 ExecutionContext._evaluateInternal (/home/denis/WEB/nlu/node_modules/puppeteer/lib/ExecutionContext.js:122:13) 在 process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- 在执行上下文。 (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) 在 ElementHandle.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/JSHandle.js:436:50) 在 process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- 在元素句柄。 (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) 在 DOMWorld.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/DOMWorld.js:156:21) 在 process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- 在框架。 (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) 在 Page.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/Page.js:347:29) 在页面。 (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:112:23) 在 crawlForSchedule (/home/denis/WEB/nlu/crawler.js:99:16) 在 process._tickCallback (internal/process/next_tick.js:68:7)

据我了解，这意味着login 变量超出了浏览器上下文或类似情况。

我发现可以像这样使用page.evaluate() 函数传递变量：

const links = await page.evaluate((evalVar) => {
  console.log(evalVar); // should be defined now
}, evalVar);

但是如何用page.$eval() 函数做这样的事情呢？或者如何使用page.evaluate() 函数实现所需的行为（表单字段输入）？

Answer 1

试试这个：

const login = "login";
await page.evaluate(login => {
    document.querySelector('#LoginForm_username').value = login;
}, login);

Answer 2

跟随puppeteer's documentation，你可以看到我们可以在哪里插入参数。 我们可以看到参数是最后收到的一个spreaded数组（...args）。

page.$eval(selector, pageFunction[, ...args])

所以我们传递selector，然后是要评估的函数pageFunction，最后是pageFunction 的参数...args。

const login = "login" // Your variable
await page.$eval('#LoginForm_username', (el, loginValue) => { 
   el.value = loginValue
}, login);

• el 是等同于 document.querySelector('#LoginForm_username') 的元素
• loginValue 是您的参数，它将接收变量 login（或任何您想要的）
• 最后你将login variable传递给参数loginValue

你可以传递任何你想要的，因为loginValue 是一个参数。 示例：

await page.$eval('#LoginForm_username', (el, loginValue) => { 
 el.value = loginValue 
}, 'Denis');

类似问题答案here