如果存在则单击按钮，否则单击 puppeteer 中的不同按钮

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 控制台并在所需页面上执行 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');
  }

但这没有用...它只适用于 if 语句之前的 await page.waitFor(30000)...知道为什么吗？

Answer 1

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

Update：根据问题中的新信息，听起来 DOM 树中包含 #buttonToClick 的部分是在 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 的页面，其中按钮在加载时不会立即出现。

如果存在则单击按钮，否则单击 puppeteer 中的不同按钮

Click button if it is present, else click a different button in puppeteer

javascript

node.js

google-chrome-devtools

ui-testing

puppeteer