如何处理在 puppeteer 中的 ajax 请求后加载的元素

Question

我正在尝试使用 puppeteer 进行网络抓取。我最近需要处理负载的元素。当我单击搜索按钮时，结果会在 AJAX 中加载，我需要选择我尝试选择的元素在搜索结果中但不在页面的初始加载中。它生成的页面截图也包含搜索结果，如果它输出 HTML 源代码，我也可以在那里看到该元素。但不知道为什么我不能选择它。

Answer 1

您可以使用await page.waitForSelector(cssSelector);让 Puppeteer 等待任何元素显示在 UI 中，然后再继续执行脚本中的进一步步骤。默认情况下，等待的超时时间为 30 秒，但您可以将其设置为您希望的任何超时时间。

所以在你的情况下，我会：

• 在搜索栏中输入搜索文本。
• 单击搜索按钮（这将执行您的 AJAX 调用以加载结果）。
• 用await page.waitForSelector(cssSelector);问木偶等到你肯定会被显示在UI的一些元素后执行搜索可见。
• 现在 Puppeteer 已将该元素注册为可见，您知道您希望对其执行的任何操作也将正确执行。

您可能会发现，如果您不使用该waitForSelector()调用，则会显示该元素，但 Puppeteer 将超时，例如，如果您希望click对某个元素执行命令。这是因为click事件（以及与元素交互的其他 Puppeteer 事件）的超时时间非常短，有时脚本（尤其是在无头模式下）可能会过快地移动到下一条指令，以至于 UI 更新得足够快以跟上.

因此，通过添加额外的waitForSelector调用，您还可以使您的脚本更加健壮。尤其是在动态生成数据时，就像您的情况一样。