puppeteer js 元素没有点击，即使它在控制台中可用

Question

我在 html 中有以下元素。

<a title="Download photo" href="https://example.com/photos/GXqvtQh1N9A/download?force=true" rel="nofollow" download="" target="_blank" class="_1QwHQ _1l4Hh _1CBrG _1zIyn xLon9 _1Tfeo _2L6Ut _2Xklx"><svg class="Apljk _11dQc" version="1.1" viewBox="0 0 32 32" width="32" height="32" aria-hidden="false"></a>

在 Chromium 打开时从控制台。 我可以这样查询：

document.querySelector('a[title="Download photo"]');

我可以创建对它的引用：

var link = document.querySelector('a[title="Download photo"]');

然后我可以像这样点击它：

link.click();

我在 Puppeteer.js 的代码中尝试了同样的事情。同一页。

  for (const handle of getAllElements) {
    try {
      await handle.click();
    const downloadButton = await page.$('a[title="Download photo"]');
      downloadButton.click();
      await sleep.sleep(2000);
    } catch (e) {
      console.error(e);
    }
  }

初始的 handle.click() 有效，它打开了我在这里讨论的页面。 但是然后 downloadButton.click() 不起作用。 我也试过 page.click(downloadButton)。 我也试过：

const downloadButton = await page.$('a[title="下载照片"]'); 等待下载按钮.click();

为确保我使用的是同一个页面，我在页面显示在屏幕上时直观地执行此操作。

有什么想法吗？

Answer 1

正如您所提到的，每次单击图像时，它都会在顶部打开一个图层。此外，a[title="Download photo"] 需要相对于 handle 而不是页面。这是工作代码：

for (const handle of getAllElements) {
    await handle.click();
    await handle.$eval('a[title="Download photo"]', el => el.click());
    //allow download
    await page._client.send('Page.setDownloadBehavior', {
        behavior: 'allow',
        downloadPath: './'
    });
    await new Promise(resolve => setTimeout(resolve, 2000));
    //click on X to close the layer
    await page.click('._1NHYN');
}