Puppeteer - Passing a variable to page.evaluate()

Question

I'm trying to scrape a bunch of tables on a page with Puppeteer but the amount of tables varies each time and therefore i need to pass a variable into the page.evaluate() function.

I have an array containing the variables i need to use but lets say i wanna check the second table manually using a variable, here's how i approached the problem initially:

const x = 2
let value = await page.evaluate(() =>
document.querySelector("#pageBody > div:nth-child(" + x + ") > table > tr > td").innerText
);
console.log(value);

//Evaluation failed: ReferenceError: x is not defined

After some research,from what i understand, the correct way of passing a variable in there is:

const x = 2;
let value = await page.evaluate((x) => { 
document.querySelector("#pageBody > div:nth-child(" + x + ") > table > tr > td").innerText 
}, x);
console.log(value);

//value = undefined

But since im not getting the results i want, there's something im doing wrong or not understanding properly. Any ideas?

Answer 1

Figured it out. Of course 5 minutes after posting to SO following hours of frustration, but here goes:

const x = 2;
let value = await page.evaluate((x) => { 
return Promise.resolve(document.querySelector("#pageBody > div:nth-child(" + x + ") > table > tr > td").innerText) 
}, x);
console.log(value);

Answer 2

I'll just add this to settle some confusion, if you do it in a one line arrow function you don't need the return:

const css = "#pageBody > div:nth-child(" + x + ") > table > tr > td"
let value = await page.evaluate((css) => document.querySelector(css).innerText), css);