How to wait for event triggered page reloads with

Question

I'm trying safely handle the behavior of a page which uses an in-browser event on a select element to trigger a page reload (POST). The URL is the same but the page reloads with the same HTML and the only difference is the sort order of content in a table. I tried several methods but somehow none are reliable, how can I achieve something like this:

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

Basically, waitForNextPageReload doesn't exist but I'm looking for something which would provide similar results. I tried to add 'delays' but I'm looking for something more reliable to manage errors correctly.

Answer 1

Try page.waitForNavigation.

Quoting from puppeteer docs:

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.

It seems good for your use case where you are indirectly reloading the page

Answer 2

There may be a race condition between selecting and navigation promises (see examples here or here). Can you try this approach?

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

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