如何处理在 puppeteer 中 ajax 请求后加载的元素
how to handle elements that load after ajax request in puppeteer
我正在尝试使用 puppeteer 进行网页抓取。我最近需要处理负载的元素。当我单击搜索按钮时，结果加载到 AJAX 中，我需要选择我要选择的元素在搜索结果中，但不在页面的初始加载中。它生成的页面截图也包含搜索结果，如果它输出 HTML 源，我也可以在那里看到该元素。但不知道为什么我不能选择它。
您可以使用 await page.waitForSelector(cssSelector); 让 Puppeteer 等待任何元素显示在 UI 中，然后再继续执行脚本中的进一步步骤。默认情况下，等待的超时时间为 30 秒，但您可以将其设置为您希望的任何超时时间。
所以在你的情况下我会：
- 在搜索栏中输入您的搜索文本。
- 单击搜索按钮（这将执行您的 AJAX 调用以加载结果）。
- 使用
await page.waitForSelector(cssSelector); 让 Puppeteer 等待，直到您确定某些元素将显示在 UI after 执行搜索可见。
- 现在 Puppeteer 已将元素注册为可见，您知道您希望对其执行的任何操作也将正确执行。
如果您不使用 waitForSelector() 调用，您可能会发现会显示该元素，但 Puppeteer 会超时，例如，如果您希望执行 click 命令在一个元素上。这是因为 click 事件（以及其他与元素交互的 Puppeteer 事件）的超时非常短，有时脚本（尤其是在无头模式下）可以过快地移动到下一条指令以允许 UI 更新速度足以跟上。
因此，通过添加额外的 waitForSelector 调用，您还可以使脚本更加健壮。尤其是在您的情况下动态生成数据时。
我正在尝试使用 puppeteer 进行网页抓取。我最近需要处理负载的元素。当我单击搜索按钮时，结果加载到 AJAX 中，我需要选择我要选择的元素在搜索结果中，但不在页面的初始加载中。它生成的页面截图也包含搜索结果，如果它输出 HTML 源，我也可以在那里看到该元素。但不知道为什么我不能选择它。
您可以使用 await page.waitForSelector(cssSelector); 让 Puppeteer 等待任何元素显示在 UI 中，然后再继续执行脚本中的进一步步骤。默认情况下，等待的超时时间为 30 秒，但您可以将其设置为您希望的任何超时时间。
所以在你的情况下我会：
- 在搜索栏中输入您的搜索文本。
- 单击搜索按钮（这将执行您的 AJAX 调用以加载结果）。
- 使用
await page.waitForSelector(cssSelector);让 Puppeteer 等待，直到您确定某些元素将显示在 UI after 执行搜索可见。 - 现在 Puppeteer 已将元素注册为可见，您知道您希望对其执行的任何操作也将正确执行。
如果您不使用 waitForSelector() 调用，您可能会发现会显示该元素，但 Puppeteer 会超时，例如，如果您希望执行 click 命令在一个元素上。这是因为 click 事件（以及其他与元素交互的 Puppeteer 事件）的超时非常短，有时脚本（尤其是在无头模式下）可以过快地移动到下一条指令以允许 UI 更新速度足以跟上。
因此，通过添加额外的 waitForSelector 调用，您还可以使脚本更加健壮。尤其是在您的情况下动态生成数据时。