Check for all frames to load - puppeteer

Question

I would like to check that all frames on a page have been loaded. I can't quite figure this out, and part of that is I don't fully understand the frame events (specifically when exactly do frameattached and framenavigated events fire?).
Here is what I am doing right now, but I'm binding to the same page event several times rather than a frame event.
function waitForFrames() {
return Promise.all(page.frames().map((frame) => {
return new Promise(resolve => {
page.on('framenavigated', resolve);
});
})).then(() => {
console.log('Frames loaded');
})
.catch(e => {
console.log(e.message);
});
}
How can I check that all frames are loaded?

Answer 1

The Puppeteer Documentation for the Frame class helps explain the frame events:
class: Frame
At every point of time, page exposes its current frame tree via the page.mainFrame() and frame.childFrames() methods.
Frame object's lifecycle is controlled by three events, dispatched on the page object:
'frameattached' - fired when the frame gets attached to the page. A Frame can be attached to the page only once.
'framenavigated' - fired when the frame commits navigation to a different URL.
'framedetached' - fired when the frame gets detached from the page. A Frame can be detached from the page only once.
You can wait for a frame (by name) using the following function:
const wait_for_frame = (page, frame_name) => {
let fulfill_promise;
const promise = new Promise(x => fulfill_promise = x);
check_frame();
return promise;
const check_frame = () => {
const frame = page.frames().find(current_frame => current_frame.name() === frame_name);
if (frame) {
fulfill_promise(frame);
} else {
page.once('frameattached', check_frame);
}
};
};
// Waiting for frame to become attached:
const frame = await wait_for_frame(page, frame_name);
// Waiting for frame to contain a certain selector:
await frame.waitForSelector(selector);
const button = await frame.$(selector);
button.click();
The above code snippet was influenced by and improved on from: Source.
Finally, you can loop through and await the frames one-by-one.

Answer 2

Using Grant's solution I ran into the problem, that the iFrame I'm looking for sometimes gets detached after pageload and then (re-)attached and navigated. In this case the waitForSelector produces an exception "iFrame got detached". It seems to me that a frame appearing in page.frames() is not guaranteed to actually be attached.
So I changed the wait_for_frame function of his solution to cover this case. This also covers the case when there are multiple iFrames on the page.
const wait_for_frame = (page, frame_name) => {
const check_frame = frame => {
if (frame.name() == frame_name) {
fulfill_promise(frame);
page.off('framenavigated', check_frame);
}
};
let fulfill_promise;
const promise = new Promise(x => fulfill_promise = x);
page.on('framenavigated', check_frame);
return promise;
};
// Waiting for frame to become attached:
const frame = await wait_for_frame(page, frame_name);
// Waiting for frame to contain a certain selector:
await frame.waitForSelector(selector);
const button = await frame.$(selector);
button.click();