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

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

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

所以对于你的情况我会：

• 在搜索栏中输入您的搜索文本。
• 单击搜索按钮（这将执行 AJAX 调用来加载结果）。
• Use await page.waitForSelector(cssSelector);要求 Puppeteer 等待，直到您确定某个元素将显示在 UI 中after执行搜索是可见的。
• 现在 Puppeteer 已将该元素注册为可见，您知道您希望对其执行的任何操作也将正确执行。

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

所以通过添加额外的waitForSelector调用，您还可以使您的脚本更加健壮。特别是当数据像您的情况一样动态生成时。