Puppeteer page.evaluate querySelectorAll is always empty

Issue

I have a node project using puppeteer.
I run the following code in console and I get 170 results back

circlenod = window.document.querySelectorAll('area[templateid="ucChart_pnlip"]');
    for (var i = 0; i < circlenod.length; i++) {
        console.log('circlenod --> : ', circlenod[i]);
    }

However when I try to use page evaluate in puppet or $$ method, I get no results coming back

let test;
let list = await page.$$('area[templateid="ucChart_pnlip"]');
console.log('list ===> ', list); ===> this is empty
await page.evaluate(() => {
    console.log('coming in ??'); ==> never see this 
    test = Array.from(document.querySelectorAll('area[templateid="ucChart_pnlip"]'));
    for (var i = 0; i < test.length; i++) {
        console.log('circlenod --> : ', test[i]); ==> never see this
    }
 })
 console.log('test', test); ==> undefined 

This is an example of the element. How can I extract this information from the attribute after looping through all the <area /> fields="date|5/1/2020|14"

<area shape="poly" coords="802,235,807,233,807,241,802,243" fields="date|5/1/2020|14" templateid="ucChart_pnlip" href="../../../../../../UserControls/History/Single/#" onclick="charttip_Show(this, event);return false" alt="">

Solution

I found a solution for this, I am putting this out there for whoever needs it. when you get array of elements, you need to spicify the attribute of the element that you want

let test= await page.evaluate((sele) =>{

    const elements = Array.from(document.querySelectorAll(sele))
    let links = elements.map(element=>{
        return element.getAttribute('fields');
    })
    return links;
    },'area[templateid="ucChart_pnlip"]')

console.log(test)

Answered By – benji_r

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.