How to put a variable inside a browser context when using page.$eval() in Puppeteer?

Question

I'm trying to run a code like this:

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

It enters a login value inside a form field.

However, I keep getting a weird error:

Error: Evaluation failed: ReferenceError: login is not defined at puppeteer_evaluation_script:1:19 at ExecutionContext._evaluateInternal (/home/denis/WEB/nlu/node_modules/puppeteer/lib/ExecutionContext.js:122:13) at process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- at ExecutionContext. (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) at ElementHandle.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/JSHandle.js:436:50) at process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- at ElementHandle. (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) at DOMWorld.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/DOMWorld.js:156:21) at process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC -- at Frame. (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:111:15) at Page.$eval (/home/denis/WEB/nlu/node_modules/puppeteer/lib/Page.js:347:29) at Page. (/home/denis/WEB/nlu/node_modules/puppeteer/lib/helper.js:112:23) at crawlForSchedule (/home/denis/WEB/nlu/crawler.js:99:16) at process._tickCallback (internal/process/next_tick.js:68:7)

As far as I understand, it means that the login variable is out of browser context or something like this.

I've found that it's possible to pass a variable using the page.evaluate() function like this:

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

but how to do something like this with the page.$eval() function? Or how can I achieve the needed behavior (form field input) using the page.evaluate() function?

Does this answer your question? [How to pass a function / variable in Puppeteer page.$eval?](https://stackoverflow.com/questions/63466772/how-to-pass-a-function-variable-in-puppeteer-page-eval) — demo, Mar 16 '21 at 11:21

score 1 · Accepted Answer · answered Sep 08 '19 at 17:12

1

Try this:

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

answered Sep 08 '19 at 17:12

Evgeni

136
4

score 0 · Answer 2 · answered Mar 16 '21 at 14:42

Following the puppeteer's documentation, you can see where we can insert parameters. We can see that the parameters are a spreaded array (...args) that is received in last.

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

So we pass the selector then the function to be evaluated pageFunction and finally the arguments to the pageFunction the ...args.

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

el is your element equivalent to document.querySelector('#LoginForm_username')
loginValue is your parameter that will receive the variable login (or anything you want)
And lastly you pass the login variable to the parameter loginValue

You can pass anything you want because loginValue is a parameter. Example:

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

How to put a variable inside a browser context when using page.$eval() in Puppeteer?

2 Answers2