Using Puppeteer To Click Main Links And Clicking Sub-links?

Simplification : I have a website with links. After clicking on each link , it goes to a new page that I need to visit the links ( by clicking , not navigating). Visualization :

Solution 1:

Update:

https://github.com/GoogleChrome/puppeteer/issues/3535

Original Answer:

Update , I've managed to solve it but not via the regular way that I wanted.

It seems that there is a problem with ElementHandle. Which is why I've moved to pure DOM objects.

I'm still interested with a more intuitive solution rather by dealing with ElementHandle :

Anyway here is my solution :

(async () =>
{
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    let url = "https://www.mutualart.com/Artists";
    console.log(`Fetching page data for : ${url}...`);
    await page.goto(url);
    await page.waitForSelector(".item.col-xs-3");

    let arrMainLinks = await page.evaluate(() =>
                                           {

                                               returnArray.from(document.querySelectorAll('.item.col-xs-3 > a'));
                                           });
    console.log(arrMainLinks.length);
    for (let i = 0; i < arrMainLinks.length; i++) //get the main links
    {


        await page.evaluate((a) =>
                            {


                                return ([...document.querySelectorAll('.item.col-xs-3 > a')][a] asHTMLElement ).click();
                            }, i);
        await page.waitForNavigation();
        let arrSubLinks2 = await page.evaluate(() =>
                                               {
                                                   returnArray.from(document.querySelectorAll('.slide>a'));
                                               });
        console.log(arrSubLinks2.length);
        for (let j = 0; j < arrSubLinks2.length; j++)
        {
            console.log('███AAA');
            await page.evaluate((a) =>
                                {

                                    return ([...document.querySelectorAll('.slide>a')][a] asHTMLElement) .click();
                                }, j);

            await page.waitForNavigation();
            letddd: ElementHandle[] = await page.$$('.artist-name');
            console.log(ddd.length);

            console.log('███BBB');
            await page.waitFor(2000);
            await page.goBack();
            console.log('███CCC');

        }
        await page.waitFor(2000);
        await page.goBack();
    }
    await browser.close();
})();