Question

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

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');
  }

出于某种原因，即使我转到我的Chrome控制台并在所需页面上执行else并且显示为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。

更新：使用问题中的新信息，听起来DOM包含#buttonToClick的DOM树部分是在DOMContentLoaded事件之后构建的。我使用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');
  }

Answer 2

听起来像你真正想要的......

const btn = await Promise.race([
      page.waitForSelector('#buttonToClick'),
      page.waitForSelector('#otherButton')
]);

await btn.click()

即。等一个或另一个按钮。无论先找到哪一个，请单击该那个。这甚至可以在SPA或基于ajax的页面上工作，其中按钮在加载后不会立即出现。

单击按钮（如果存在），否则单击木偶操纵者中的其他按钮

2 个答案: