CODEWITHSUNDEEP
javascriptnode.jspuppeteergoogle-chrome-headless
Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4757

How to wait for event triggered page reloads with Puppeteer?

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.

Upvotes: 0

Views: 4000

Answers (2)

vsemozhebuty
vsemozhebuty

Reputation: 13782

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

Upvotes: 4

jro
jro

Reputation: 940

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

Upvotes: 2

Related Questions