question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Need a generic wait for network idle after click

See original GitHub issue

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: puppeteer@2.0.0
  • Platform / OS version: Ubuntu 18.04.2 LTS
  • Node.js version: v12.9.1

What steps will reproduce the problem?

The following simple example almost works, but need to wait for network idle after click, to be perfect:

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch({headless: true});
  try {
    const page = await browser.newPage();

    await page.setViewport({width: 800,height: 800});
    const response = await page.goto(`https://stock.finance.sina.com.cn/usstock/quotes/TSLA.html`, {
        waitUntil: 'networkidle0'
      });
    //console.log(await page.content());

    let selector = `div.kke_menus_tab_edage > div:nth-child(6) > a`
    await page.waitForSelector(selector)
    await page.click(selector)

    const inputElement = await page.$('div.sec.clearfix div.block.block_hq')
    await inputElement.screenshot({path: 'sina-finance.png'})

  } catch (err) {console.log(err.message);}
  finally {
    await browser.close();
  }
})()

So, in summary,

  • The click does not trigger any navigation
  • The inputElement already exist, even before clicking so can’t wait on that.

What is expected

Any simple solution like page.waitForNavigation, e.g., page.waitForNetwork({waitUntil: 'networkidle0'})?

What happens instead?

No such simple solution.

Therefore, I’m raising a bug for the puppeteer project to provide one.

I know there are two alternatives, one is wait for a fixed time, and for the other, people might suggests await page.waitForResponse, e.g., #3649, & #5228. However, here are the reasons that they are not ideal.

  • To wait for a fixed time, I normally need to only wait for 3 seconds, however do to network traffic, server load, etc, etc, that fixed time is now 24 seconds – eight times more than necessary.
  • To use await page.waitForResponse, the response.url() has to be very specific, right? Unfortunately, if that’s the case, it won’t work for my case, as the sub request is firing up to /e.gif?UATrack||170.1xx.1xx.6_1579617169.47||170.1xx.1xx.6_1579617169.48||||chart_detail||k_re0||||||||&gUid_1579617220029 which is changing all the times.

All in all, I need a generic solution, not a specific one.
Just like page.waitForNavigation, I hope we can have a

page.waitForNetwork({waitUntil: 'networkidle0'})

for both navigation and clicking.

Please consider. Thx.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:67
  • Comments:23

github_iconTop GitHub Comments

105reactions
Jany-Mcommented, Apr 30, 2020

You can use

function delay(time) {
  return new Promise(function(resolve) { 
	 setTimeout(resolve, time)
  });
}

And then just

await delay(3000);


UPDATE

await page.waitFor(3000);

Provided by Puppetteer itself.

15reactions
royryandocommented, Nov 16, 2020

If the case is like a login form and you need to wait for next page after submitting form, try use this

await Promise.all([
  page.click('#login_button'),
  page.waitForNavigation({ waitUntil: 'networkidle0' })
]);

But if you need to wait an ajax request to finish after clicking the button, maybe this can help. in my case it works fine

await Promise.all([
  page.click('#refresh_table'),
  page.waitForResponse(response => response.status() === 200)
]);

There is some method for response for checking: response.url() response.status() response.headers(), etc

Read more comments on GitHub >

github_iconTop Results From Across the Web

puppeteer wait for network idle after click - Stack Overflow
How can I wait for network idle after click on an element in puppeteer? So here is a simple working example for people...
Read more >
Navigating & waiting - Checkly
This method waits for an element to appear in the page. This is your bread and butter and should be used whenever something...
Read more >
Page.waitForNetworkIdle() method - Puppeteer
waitForNetworkIdle () method ... { idleTime?: number; timeout?: number; }, (Optional) Optional waiting ... Promise which resolves when network is idle.
Read more >
How to make puppeteer wait for page to load - Urlbox
The Page.waitForNetworkIdle() method takes an idleTime option which allows you to specify a custom amount of time in milliseconds to wait for ...
Read more >
Avoiding hard waits in Playwright and Puppeteer
In this case, our hard wait terminates and our click action is attempted ... Playwright only: networkidle , raised when there are no...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found