$$.eval 后的 Puppeteer 点击功能

Question

我想下载使用 Puppeteer 在 google 上搜索的图像。但是，在我单击图像按钮后，$.eval 下方的功能无法正常工作。它说 failed to find element matching selector div[jsname="I4bIT"] 。我想知道使用 $$.eval 单击某些内容是否会更改页面实例？非常感谢您。

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

您需要在第一次点击后等待 image-search 选项卡的元素加载到 DOM。可以通过 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
...

...或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
...

$$.eval 后的 Puppeteer 点击功能

Puppeteer click function after $$.eval

javascript

chromium

puppeteer