How can I wait for network idle after click on an element in puppeteer?

Question

const browser = await puppeteer.launch({headless: false});
await page.goto(url, {waitUntil: 'networkidle'});

await page.click('.to_cart'); //Click on element trigger ajax request
//Now I need wait network idle(Wait for the request complete)
await page.click('.to_cart');

UPD: No navigation after the element was clicked

See https://github.com/GoogleChrome/puppeteer/issues/3083 – vsemozhebuty Jan 26 '19 at 11:56 — vsemozhebuty, Jan 26 '19 at 11:56

score 9 · Accepted Answer · answered May 06 '19 at 19:20

I ran into a similar issue and found the workaround function on the Puppeteer Control networkidle wait time issue to suit my needs: https://github.com/GoogleChrome/puppeteer/issues/1353#issuecomment-356561654

Essentially, you can create a custom function, and call that prior to any additional steps:

function waitForNetworkIdle(page, timeout, maxInflightRequests = 0) {
  page.on('request', onRequestStarted);
  page.on('requestfinished', onRequestFinished);
  page.on('requestfailed', onRequestFinished);

  let inflight = 0;
  let fulfill;
  let promise = new Promise(x => fulfill = x);
  let timeoutId = setTimeout(onTimeoutDone, timeout);
  return promise;

  function onTimeoutDone() {
    page.removeListener('request', onRequestStarted);
    page.removeListener('requestfinished', onRequestFinished);
    page.removeListener('requestfailed', onRequestFinished);
    fulfill();
  }

  function onRequestStarted() {
    ++inflight;
    if (inflight > maxInflightRequests)
      clearTimeout(timeoutId);
  }

  function onRequestFinished() {
    if (inflight === 0)
      return;
    --inflight;
    if (inflight === maxInflightRequests)
      timeoutId = setTimeout(onTimeoutDone, timeout);
  }
}

// Example
await Promise.all([
  page.goto('https://google.com'),
  waitForNetworkIdle(page, 500, 0), // equivalent to 'networkidle0'
]);

score 1 · Answer 2 · edited Sep 26 '21 at 14:38

1

There are two methods in Puppeteer docs.

Example:

await Promise.all([
    page.waitForRequest(callback), 
    page.waitForResponse(callback)
])

edited Sep 26 '21 at 14:38

Farhad

494
5
20

answered Feb 03 '19 at 19:00

Naimur Rahman

697
4
15

score -3 · Answer 3 · answered Jan 28 '19 at 06:24

-3

Directly from the 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. Consider this example:

const [response] = await Promise.all([
  page.waitForNavigation(), // The promise resolves after navigation has finished
  page.click('a.my-link'), // Clicking the link will indirectly cause a navigation
]);

answered Jan 28 '19 at 06:24

NoriSte

3,589
1
19
18

4

Click on element don't cause navigation – Serhii Shliakhov Jan 28 '19 at 09:14
Please provide us with a GitHub repo with the not-working example, we can be more effective in helping you – NoriSte Jan 28 '19 at 09:42
2

It's a working example, the problem is I don't know how I can wait network idle if clicking on an element cause xhr request and don't cause navigation(its expected behavior) – Serhii Shliakhov Jan 29 '19 at 09:47
Thanks) I'll try iit – Serhii Shliakhov Jan 29 '19 at 11:02
Let me know so I can update my reply with a correct one – NoriSte Jan 29 '19 at 11:07
NoriSte, please check out the not-working example at https://stackoverflow.com/questions/59831875/, thx. – xpt Jan 20 '20 at 22:51

How can I wait for network idle after click on an element in puppeteer?

3 Answers3

Linked