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.

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.

• javascript
• node.js
• puppeteer
• google-chrome-headless

• Can you provide the URL to test the code? – vsemozhebuty Commented Mar 10, 2019 at 6:55
• 1 Unfortunately, it's not available publicly. I can see if I can possibly write a demo of its behavior today. – Nicolas Bouvrette Commented Mar 10, 2019 at 13:34

2 Answers 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]');

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