单击按钮（如果存在），否则单击 puppeteer 中的其他按钮

Question

我试图if/else在 puppeteer 中设置一个语句以单击一个按钮（如果它存在），否则单击另一个按钮。我正在做这样的事情：

if (document.querySelector('#buttonToClick') !== null) {
    await page.waitForSelector('#buttonToClick');
    await page.click('#buttonToClick');
  } 

else { 
// first click #otherButton and then click #buttonToClick
    await page.waitForSelector('#otherButton');
    await page.click('#otherButton');

    await page.waitForSelector('#buttonToClick');
    await page.click('#buttonToClick');
  }

出于某种原因，else即使我进入我的 Chrome 控制台并document.querySelector('#buttonToClick') !==null在所需的页面上执行操作，我仍然陷入困境，它显示为true

更新：以下代码似乎对我有用，但我不知道为什么

await page.waitFor(3000);

  if ((await page.$('#buttonToClick')) !== null) {
    await page.click('#buttonToClick');
  } else {
    await page.waitForSelector('#otherButton');
    await page.click('#otherButton');

    await page.waitForSelector('#buttonToClick');
    await page.click('#buttonToClick');
  }`

我想也许这可能与 DOM 加载的方式有关，所以我尝试了：

await page.waitForNavigation({waitUntil: 'domcontentloaded'})
// await page.waitFor(3000)

  if ((await page.$('#buttonToClick')) !== null) {
    await page.click('#buttonToClick');
  } else {
    await page.waitForSelector('#otherButton');
    await page.click('#otherButton');

    await page.waitForSelector('#buttonToClick');
    await page.click('#buttonToClick');
  }

但这不起作用......它只适用await page.waitFor(30000)于if声明之前......任何想法为什么？

Answer 1

我不认为它document.querySelector通常存在于 node.js 程序中。Puppeteer 确实提供了page.$，这是一个近似的模拟。它返回一个 Promise。

更新：使用问题中的新信息，听起来像是#buttonToClick在 DOMContentLoaded 事件之后构造了包含的 DOM 树部分。我使用 取得了不错的结果page.waitForNavigation({ waitUntil: 'networkidle0' })，但如果网络连接持续存在，“networkidle2”或其他一些选项可能会更好。在此处查看各种选项：https : //github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions

我怀疑这应该有效：

await page.waitForNavigation({ waitUntil: 'networkidle0' });
if (await page.$('#buttonToClick') !== null) {
    await page.click('#buttonToClick');
  } else {
    await page.waitForSelector('#otherButton');
    await page.click('#otherButton');
  }