Clicking and waiting for navigation is flaky in 0.13

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.13.0
• Platform / OS version: macOS / 10.13.2
• Node: 8.9.0

What steps will reproduce the problem?

We replaced casperjs tests with jest+puppeteer and in multiple tests we use click+waitForNavigation combo. This worked fine in 0.12, but it seems to be broken in 0.13.

Minimal example:

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  page.on('load', () => console.log('loaded!'));

  await page.goto('https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html');
  await page.waitForSelector('form[action^="/my-handling-form-page"]');
  await page.type('input[name="user_mail"]', '[e-mail]');
  await page.type('input[name="user_name"]', 'mati');

  await page.click('button[type="submit"]');
  console.log('clicked');

  await page.waitForNavigation();

  console.log('done');
}

main();

What is the expected result? Console should say (as it does every time in 0.12):

loaded!
clicked
loaded!
done

What happens instead? Most of the time (not always!) console says:

loaded!
loaded!
clicked
(node:31100) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Navigation Timeout Exceeded:30000ms exceeded

---

Seems to be reproducible in try-puppeteer (although happens less often than on my machine)

[aslushnikov]

@kdzwinel the waitForNavigation is in fact a waitForNextNavigation. Puppeteer lives out-of-process to chrome, so the “next navigation” is a racy concept.

If you’re sure that page is not navigating somewhere and that click spawns a navigation, I’d use the following pattern to click-and-wait-for-navigation:

await Promise.all([
  page.click('button[type="submit"]'),
  page.waitForNavigation(),
]);

Generally, as @xprudhomme mentioned, the waitForSelector gives much better guarantees about page state then waitForNavigation.

[mathurs]

We need a generic way to check the page url after a click event where the click may or may not navigate. Having to know beforehand is a bummer and in this case waitForSelector can’t be used.

Is there anyway we can know if there are active network request or to check the readyState of the document. That would really help.