In a specific case, I need to access a series of checkboxes using Puppeteer. Each checkbox has the same id and name, but different values for value. I want to get the value of each selector and then use that to click the checkbox that matches up with the text selector I'm scanning for. Here is the code segment:

await page.waitForSelector("input[type='checkbox']");
let boxArray = await page.$$eval("input[type='checkbox']", el => el.value);
const boxes = (await page.$$("input[type='checkbox']")).length;
for(var box=2;box<boxes+1;box++)
{
    await page.waitForSelector("this is inconsequential");
    const title = await page.$eval("this is inconsequential", el => el.innerText);
    if(title.includes("string I'm searching for"))
    {
        console.log('Clicking group check box: %s', title);
        console.log('Value: %s', boxArray[box]);
        await page.waitForSelector("input[value='"+boxArray[box]+"']");
        // the rest doesn't matter
     }
}

Once the code reaches console.log('Value: %s', boxArray[box]), I get this error:

Value: undefined
TypeError: Cannot read property '5' of undefined

I can't figure out why boxArray is undefined, as page.$$eval() should be populating an array with the value of every checkbox on the page.

In a specific case, I need to access a series of checkboxes using Puppeteer. Each checkbox has the same id and name, but different values for value. I want to get the value of each selector and then use that to click the checkbox that matches up with the text selector I'm scanning for. Here is the code segment:

await page.waitForSelector("input[type='checkbox']");
let boxArray = await page.$$eval("input[type='checkbox']", el => el.value);
const boxes = (await page.$$("input[type='checkbox']")).length;
for(var box=2;box<boxes+1;box++)
{
    await page.waitForSelector("this is inconsequential");
    const title = await page.$eval("this is inconsequential", el => el.innerText);
    if(title.includes("string I'm searching for"))
    {
        console.log('Clicking group check box: %s', title);
        console.log('Value: %s', boxArray[box]);
        await page.waitForSelector("input[value='"+boxArray[box]+"']");
        // the rest doesn't matter
     }
}

Once the code reaches console.log('Value: %s', boxArray[box]), I get this error:

Value: undefined
TypeError: Cannot read property '5' of undefined

I can't figure out why boxArray is undefined, as page.$$eval() should be populating an array with the value of every checkbox on the page.

• javascript
• node.js
• puppeteer

1 Answer 1

boxArray is undefined.

$$eval will run Array.from(document.querySelectorAll("input")) and pass it to the pageFunction. It doesn't create a loop to get the value of each function. https://github./GoogleChrome/puppeteer/blob/master/docs/api.md#pageevalselector-pagefunction-args

Use a for ... of loop to get the value instead of $$eval. Consider this example:

const inputsValues = [];
const inputElements = await page.$$('input');

for (const element of inputElements) {
        let inputValue;

        inputValue = await element.getProperty('checked');
        inputValue = await inputValue.jsonValue();

    inputsValues.push(inputValue);
}