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

Question

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

    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 不存在，但我正在寻找可以提供类似结果的东西。我尝试添加 'delays' 但我正在寻找更可靠的东西来正确管理错误。

Answer 1

尝试page.waitForNavigation。

引自 puppeteer 文档：

This resolves when the page navigates to a new URL or reloads. It is useful for when you run code which will indirectly cause the page to navigate.

这似乎适合您间接重新加载页面的用例

Answer 2

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

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

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

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

How to wait for event triggered page reloads with Puppeteer?

javascript

node.js

google-chrome-headless

puppeteer