Puppeteer click function after $$.eval

Question

I would like to download images which I search on google using Puppeteer. However after I click the images buttons, below $.eval functions are not working. It said failed to find element matching selector div[jsname="I4bIT"] . I wonder if clicking something using $$.eval change the page instance? Thank you very much in advance.

async function findAndDownloadImage(page, elem = 'hello') {
    try {
        await page.goto(`https://www.google.com/search?q=${elem}+expression`);

        await page.$$eval('.HF9Klc.iJddsb', elem => elem[1].click()); //click picture button

        await page.$eval('div[jsname="I4bIT"]', clickAction); //click tool button
        await page.$eval('div[aria-label="大小"]', clickAction); //click sizeButton 
        await page.$eval('a[aria-label="大"]', clickAction); //click largeOption 

        
        await page.$eval('.rg_i.Q4LuWd', clickAction); //click 1st image

    } catch (e) {
        console.log(e)
    }
}

Answer 1

You need to wait after the first click until the image-search tab's elements are loaded into the DOM. It can be achieved with page.waitForSelector:

await page.$$eval('.HF9Klc.iJddsb', elem => elem[1].click()); //click picture button
await page.waitForSelector('div[jsname="I4bIT"]'); //wait for image-search tab loaded v1
await page.$eval('div[jsname="I4bIT"]', clickAction); //click tool button
...

...or page.waitForNavigation:

await page.$$eval('.HF9Klc.iJddsb', elem => elem[1].click()); //click picture button
await page.waitForNavigation(); //wait for image-search tab loaded v2
await page.$eval('div[jsname="I4bIT"]', clickAction); //click tool button
...