waitForNavigation doesn't work after clicking a link

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.13.0
• Platform / OS version: Win10x64 / Chromium 64.0.3270.0 r516713

What steps will reproduce the problem?

const puppeteer = require('puppeteer');

(async () => {
	try {
		const browser = await puppeteer.launch({
			headless       : false,
			executablePath : 'D:/path/to/chromium/chrome.exe',
			userDataDir    : 'D:/path/to/userdir',
			args           : ['about:blank']
		});

		const pages = await browser.pages();
		const page = pages[0];

		page.on('load', () => console.log('Loaded: ' + page.url()));

		// goto: page1.html
		await page.goto('https://leo020588.bitbucket.io/page1.html', {waitUntil: 'load'});

		// workaround-fix
		/*await page.evaluate(() => {
			let link = document.querySelector('a');
			link.addEventListener('click', (event) => {
				event.preventDefault();
				event.stopPropagation();
				window.location = link.href;
			});
		});*/

		// click: link (page2.html)
		await page.click('a');

		//
		await page.waitForNavigation({waitUntil: 'load'});
		console.log('page2.html has arrived ... the wait is over');

		//
		await browser.close();

	} catch (e) {
		console.log(e);
	}
})();

What is the expected result? page2.html has arrived ... the wait is over

What happens instead? Error: Navigation Timeout Exceeded: 30000ms exceeded

Note If I uncomment the workaround-fix works as espected.

[leo020588]

@ebidel Sorry if this is not the place to discuss standard-javascript implementation/understanding. What suggested @vsemozhetbyt works for me. But I still think your suggestion has the same behavior as my code, I would like to clarify if am I wrong for not to confuse other readers before I close the issue.

OPTION-1 (@leo020588) - my original code doesn’t work as expected (Error: Navigation Timeout)

// I read this as:
// - wait for page.click() to resolve, then after resolves ...
// - wait for page.waitForNavigation() to resolve, then after resolves ...
// - console.log
await page.click('a');
await page.waitForNavigation();
console.log('The wait is over 1');

OPTION-2 (@vsemozhetbyt) - works as expected (“The wait is over 2”)

// I read this as:
// - trigger page.click(), don't wait to resolve, inmediately after ...
// - wait for page.waitForNavigation() to resolve, then after resolves ...
// - then console.log"
page.click('a');
await page.waitForNavigation();
console.log('The wait is over 2');

OPTION-3 (@ebidel) - doesn’t work as expected (Error: Navigation Timeout)

// I read this exactly the same as OPTION-1
await page.click('a').then(() => page.waitForNavigation());
console.log('The wait is over 3');

Edit: I like @aslushnikov’s approach better, it makes more sense:

await Promise.all([
  page.waitForNavigation(),
  page.click('a')
]);

[aslushnikov]

@leo020588 another way to think of waitForNavigation is that it waits for the navigation to start and complete.

In your case, the await page.click('a') returns control to the script too late - the navigation has already started.

The handy way to do this is:

await Promise.all([
  page.click('a'),
  page.waitForNavigation()
]);