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

Question

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

Answer 1

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

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

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

如果不使用该waitForSelector()调用，可能会发现会发生，即显示元素，但是Puppeteer将超时，例如，如果您希望在元件。这是因为click事件（以及与元素交互的其他Puppeteer事件）的超时非常短，有时脚本（尤其是无头模式）可能太快地移至下一条指令，从而无法更新UI足够快地跟上。

因此，通过添加其他click调用，还可以使脚本更加健壮。尤其是当数据按您的情况动态生成时。