Support waitForNavigation for frames

[hlr1983]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.6.0
• Platform / OS version: Linux henrique-Latitude-5480 4.15.0-23-generic Tweaks to readme. API doc link #25-Ubuntu SMP Wed May 23 18:02:16 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
• URLs (if applicable): http://home.ubalt.edu/abento/frames/myframe.html
• Node.js version: v8.11.3

What steps will reproduce the problem?

(async () => {

const puppeteer = await require('puppeteer');

const browser = await puppeteer.launch({headless:false,/* slowMo: 50*/});
const incognitoContext = await browser.createIncognitoBrowserContext();
const page = await incognitoContext.newPage();
page.on('dialog', async dialog => {
    await console.log('MESSAGE "%s": "%s"',dialog.type(),dialog.message());
    await dialog.dismiss();
});
await page.setCacheEnabled(false);

await page.goto('http://home.ubalt.edu/abento/frames/myframe.html', {waitUntil: ['load','domcontentloaded','networkidle0']});

const leftFrame = await page.frames().filter( el => el.name() == 'left')[0]
const rightFrame = await page.frames().filter( el => el.name() == 'right')[0]
await console.log('URLS: MAIN FRAME: %s ; RIGHT FRAME: %s ; LEFT FRAME: %s ', page.url(), rightFrame.url(), leftFrame.url());
const navigationPromise = page.waitForNavigation();
await leftFrame.click('a[href="option2.html"]');
await console.log('URLS: MAIN FRAME: %s ; RIGHT FRAME: %s ; LEFT FRAME: %s ', page.url(), rightFrame.url(), leftFrame.url());
await page.waitFor(5000);
await console.log('URLS: MAIN FRAME: %s ; RIGHT FRAME: %s ; LEFT FRAME: %s ', page.url(), rightFrame.url(), leftFrame.url()); // DISPLAY OTHER URL FOR rightFrame
await navigationPromise;
await console.log('URLS: MAIN FRAME: %s ; RIGHT FRAME: %s ; LEFT FRAME: %s ', page.url(), rightFrame.url(), leftFrame.url()); // NOT DISPLAYED, navigationPromise ERROR
await browser.close();
    
})();

What is the expected result?
I was expecting navigationPromise to be resolved, but it doesn't.

What happens instead?

navigationPromise isn't resolved. Is it the expected behavior? Is it possible to add a frame.waitForNavigation() function?

Screenshot:

Thanks

PS: I've also tried with the code below, using waitForNavigation as suggested in frame.click() documentation:

"use strict";

(async () => {

const puppeteer = await require('puppeteer');

const browser = await puppeteer.launch({headless:false,/* slowMo: 50*/});
const incognitoContext = await browser.createIncognitoBrowserContext();
const page = await incognitoContext.newPage();
page.on('dialog', async dialog => {
    await console.log('MESSAGE "%s": "%s"',dialog.type(),dialog.message());
    await dialog.dismiss();
});
await page.setCacheEnabled(false);

await page.goto('http://home.ubalt.edu/abento/frames/myframe.html', {waitUntil: ['load','domcontentloaded','networkidle0']});

const leftFrame = await page.frames().filter( el => el.name() == 'left')[0]
const rightFrame = await page.frames().filter( el => el.name() == 'right')[0]

await Promise.all([
    page.waitForNavigation(),
    leftFrame.click('a[href="option2.html"]')
]);

})();

[aslushnikov]

@hlr1983 Your click navigates a frame rather than a page; unfortunately, we don't currently support waiting for navigation for frames.

One workaround would be to listen for framenavigated event.

await Promise.all([
  leftFrame.click('a[href="option2.html"]'),
  new Promise(resolve => page.once('framenavigated', resolve))
]);

[JonnyBoy333]

I'm running into this same issue in my use case. Even if I use the suggestion that @aslushnikov posted, Promise.all is getting resolved prematurely because the 'framenavigated' event appears to be triggered before all the content inside the frame has loaded. We really need a await frame.waitForNavigation(); solution here that can wait for the frame to finish all network requests and other loading activities before proceeding.

Hope that PR gets merged soon.