如何使用 Puppeteer 等待事件触发的页面重新加载？答案

【问题标题】：How to wait for event triggered page reloads with Puppeteer?如何使用 Puppeteer 等待事件触发的页面重新加载？
【发布时间】：2019-07-31 17:55:15
【问题描述】：

我正在尝试安全地处理在 select 元素上使用浏览器内事件来触发页面重新加载 (POST) 的页面的行为。 URL 相同，但页面使用相同的 HTML 重新加载，唯一的区别是表格中内容的排序顺序。我尝试了几种方法，但不知何故都不可靠，我怎样才能达到这样的效果：

    try {
        await page.select('select[name=sort]', 'size'); 
        await page.waitForNextPageReload();
        await page.waitForSelector('select[name=sort]');
    } catch (error) {
        console.log('Error sorting page.');
    }

基本上，waitForNextPageReload 不存在，但我正在寻找可以提供类似结果的东西。我尝试添加“延迟”，但我正在寻找更可靠的方法来正确管理错误。

【问题讨论】：

能否提供测试代码的URL？
不幸的是，它不公开。我可以看看我今天是否可以写一个关于它的行为的演示。

标签： javascript node.js puppeteer google-chrome-headless

【解决方案1】：

试试page.waitForNavigation。

引自 puppeteer 文档：

这会在页面导航到新 URL 或重新加载时解决。当您运行将间接导致页面导航的代码时，它很有用。

这对于您间接重新加载页面的用例来说似乎很好

【讨论】：

谢谢，但我已经尝试过了，但由于某些原因我会超时。我怀疑由于导航是由浏览器事件触发的，所以 Puppeteer 表现不佳？
是否可以尝试非无头模式并确保页面正在重新加载？
是的，我已经尝试过了，它正在重新加载。也许这里的问题再次是 URL 保持不变，大多数 HTML 内容也是如此（所以我也不能真正寻找新元素）。
哦，它还在重新加载发送 POST 方法 - 不确定这是否会影响 waitForNavigation 行为。

【解决方案2】：

选择和导航承诺之间可能存在竞争条件（参见示例here 或here）。你可以试试这个方法吗？

await Promise.all([
  page.select('select[name=sort]', 'size'),
  page.waitForNavigation(),
]);

await page.waitForSelector('select[name=sort]');

【讨论】：

看起来这成功了！我想我现在会更好地了解如何处理这些比赛条件！