Using Puppeteer to click and visit sub-links(also by clicking) is not working?

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 :

I’ve managed to do 99% percent of the job:

(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: ElementHandle[] = await page.$$('.item.col-xs-3 > a');   //get the main links

    console.log(arrMainLinks.length); // 16

    
    for (let mainLink of arrMainLinks) //foreach main link let's click it
    {
        let hrefValue =await (await mainLink.getProperty('href')).jsonValue();
        console.log("Clicking on " + hrefValue);
        await Promise.all([
                              page.waitForNavigation(),
                              mainLink.click({delay: 100})
                          ]);

        // let's get the sub links
        let arrSubLinks: ElementHandle[] = await page.$$('.slide >a');
        
        //let's click on each sub click
        for (let sublink of arrSubLinks)
        {
            console.log('██AAA');
           
            await Promise.all([
                                  page.waitForNavigation(),
                                  sublink.click({delay: 100})
                              ]);
            console.log('██BBB');
           
            // await page.goBack() 
            break;
        }
        break;
        
    }
   
    await browser.close();
})();

So where is the problem ?

It reaches the ██AAA
But it never reaches ██BBB

And I get an error :

 C:\temp\puppeterr1\app>node server2.js
Fetching page data for : https://www.mutualart.com/Artists...
16
Clicking on https://www.mutualart.com/Artist/Mr--Brainwash/9B3FED6BB81E6B8E
██AAA
(node:17200) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
    at Promise.then (C:\temp\puppeterr1\node_modules\puppeteer\lib\FrameManager.js:1230:21)
    at <anonymous>
  -- ASYNC --
    at Frame.<anonymous> (C:\temp\puppeterr1\node_modules\puppeteer\lib\helper.js:144:27)
    at Page.waitForNavigation (C:\temp\puppeterr1\node_modules\puppeteer\lib\Page.js:599:49)
    at Page.<anonymous> (C:\temp\puppeterr1\node_modules\puppeteer\lib\helper.js:145:23)
    at Object.<anonymous> (C:\temp\puppeterr1\app\server2.js:127:30)
    at step (C:\temp\puppeterr1\app\server2.js:32:23)
    at Object.next (C:\temp\puppeterr1\app\server2.js:13:53)
    at fulfilled (C:\temp\puppeterr1\app\server2.js:4:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:17200) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:17200) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Question:

What am I missing here ?
Why can’t it reach the ██BBB ?

is it a bug ?

Complete code

[aslushnikov]

I thought I can click items which are not in the viewport

@RoyiNamir yeah, the page.click is very close to “real mouse” - and real mouse cannot click outside of viewport.

You, however, can do clicks using DOM api:

await page.$eval('.foo', e => e.click());

[aslushnikov]

@RoyiNamir I looked closer - that’s our bug with clicking. This happens because the scrollIntoView code does nothing for the image you’re about to click, so the image center is still located outside of viewport.

In this particular case you can workaround this simply with wider ivewport:

const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {
        width: 1100,
        height: 600
    }
});