How to get Document.readyState in puppeteer / headless Chrome? - node.js

Question

Using puppeteer, I cannot figure out how to get the document.readyState. I need to wait until the page is loaded before rending a pdf.
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox']
});
const page = await browser.newPage();
console.log('Setting HTML content...');
// Can't POST data with headless chrome, so we have to get the HTML and set the content of the page, then render that to a PDF
await page.setContent(html);
// Generates a PDF with 'screen' media type.
await page.emulateMedia('screen');
var renderPage = function () {
return new Promise(async resolve => {
await page.evaluate((document) => {
console.log(document);
const handleDocumentLoaded = () => {
console.log('readyState: ', document.readyState);
console.log('Rendering PDF...');
Promise.resolve(resolve(page.pdf({ path: thisPDFfileName, format: 'Letter' })));
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", handleDocumentLoaded);
} else {
handleDocumentLoaded();
}
});
// I also tried this... no luck
// setTimeout(async function () {
// console.log('Awaiting document...');
//
// const handle = await page.evaluateHandle(() => ({window, document}));
// const properties = await handle.getProperties();
// const windowHandle = properties.get('window');
// const documentHandle = properties.get('document');
// await handle.dispose();
//
// console.log('readyState: ', documentHandle.readyState);
// if ("complete" === documentHandle.readyState) {
// await documentHandle.dispose();
// console.log('readyState: ', doc.readyState);
// console.log('Rendering PDF...');
// resolve(page.pdf({ path: thisPDFfileName, format: 'Letter' }));
// } else {
// renderPage();
// }
// }), 250;
});
};
// Delay required to allow page to render JS before creating PDF
await renderPage();
await browser.close();
sendPdfToClient();
I tried evaluateHandle and could only get the innerHTML, not the document object itself.
What's the correct way to get the document object containing readyState?
Lastly, should I set a listener for loaded or DOMContentLoaded, I need to wait until the google maps JS renders the map? I can sent a custom event if need be, since I control the page being rendered.

Answer 1

If you are using page.goto(), you can use the waitUntil option to specify when to consider navigation as complete:
The waitUntil events include:
load - consider navigation to be finished when the load event is fired.
domcontentloaded - consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0 - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2 - consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
Alternatively, you can use page.on() to wait for the 'domcontentloaded' event or 'load' event.

Answer 2

I guess I was overcomplicated it. Apparently there is already
page.once('load', () => console.log('Page loaded!'));
which does exactly this. :-D
See detailed documentation here:
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#event-load
There are 2 events which is relavant to your problem
event: 'domcontentloaded'
event 'load'