How to wait for event triggered page reloads with Puppeteer?

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.

Unfortunately, it's not available publicly. I can see if I can possibly write a demo of its behavior today. — Nicolas Bouvrette, Mar 10 '19 at 13:34

score 4 · Accepted Answer · answered Mar 10 '19 at 14:57

4

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

answered Mar 10 '19 at 14:57

vsemozhebuty

12,992
1
26
26

1

Looks like this did the trick! I guess I will know better now on how to deal with those race conditions! – Nicolas Bouvrette Mar 10 '19 at 15:23

score 1 · Answer 2 · answered Mar 10 '19 at 07:15

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

answered Mar 10 '19 at 07:15

jro

900
1
10
21

thanks but I have tried that and I'm getting a timeout for some reasons. I'm suspecting that since the navigation is triggered by a browser event, Puppeteer does not behave well with it? – Nicolas Bouvrette Mar 10 '19 at 13:35
Is it possible to try non headless mode and ensure that the page is reloading? – jro Mar 10 '19 at 14:24
Yes, I tried that already and it is reloading. Maybe here again the problem is that the URL remains the same, so is most of the HTML content (so I can't really look for a new element either). – Nicolas Bouvrette Mar 10 '19 at 14:37
Oh and it's also reloading sending a POST method - not sure if this impacts the `waitForNavigation` behavior. – Nicolas Bouvrette Mar 10 '19 at 14:52

How to wait for event triggered page reloads with Puppeteer?

2 Answers2

Linked