page.waitForTimeout 调用后，Puppeteer 无法点击元素

Question

我正在练习使用 Telegram 机器人和木偶操纵者，所以我决定创建一个机器人来从特定网站订购披萨。

一旦机器人接受了他需要的订单，他需要将他输入的数据放在页面上，如下所示：

这两个字段是跨度，当人偶操纵者点击启用的字段（左）时，他会得到一个输入来完成。然后当第一个输入完成时，人偶操纵者必须对第二个字段执行完全相同的过程：点击 <span> 标签，将数据放入输入等

但问题是第一个字段的完成和第二个字段的激活之间有一个小的时间间隔。我的机器人无法识别这个间隙并立即点击第二个字段的跨度（当然它不起作用）。

这是一个代码片段：

await page.waitForXPath('//*[@id="select2-chosen-2"]', {visible: true})
const [secondSpan] = await page.$x('//*[@id="select2-chosen-2"]')
await secondSpan.click()

当我使用此片段键入 node bot 时，我没有收到任何错误或警告。但正如我所说，第二个字段需要一些时间才能激活。我找到了一个函数，可以让 puppeeter 在一段时间内停止执行我的代码：page.waitForTimeout().

这里是 puppeteer 文档中的用法示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.waitForTimeout(1000).then(() => console.log('Waited a second!'));

  await browser.close();
})();

https://pptr.dev/#?product=Puppeteer&version=v10.1.0&show=api-pagewaitfortimeoutmilliseconds

这是我的案例：

await page.waitForXPath('//*[@id="select2-chosen-2"]', {visible: true})
const [secondSpan] = await page.$x('//*[@id="select2-chosen-2"]')

page.waitForTimeout(1500)

await secondSpan.click()

这段代码也没有显示任何错误，但它也没有点击该字段。当我将 await 添加到 page.waitForTimeout() 时，出现此错误：

Error: Node is either not visible or not an HTMLElement

我该如何解决？

Answer 1

所以我只需要输入这段代码：

await page.click('#s2id_home-number-modal')

或使用 XPath：

const [secondSpan] = await page.$x('//*[@id="select2-chosen-2"]')
await secondSpan.click()

进入.then()方法，即在page.setTimeout(500)之后调用。总而言之，它看起来像这样（顺便说一下，我已经更改了一些选择器，但这没什么大不了的）：

await page.waitForTimeout(500).then(async () => {
   await page.click('#s2id_home-number-modal')
})

page.waitForTimeout 调用后，Puppeteer 无法点击元素

Puppeteer can't click on element after page.waitForTimeout called

javascript

node.js

async-await

telegram-bot

puppeteer