Is it possible to send data from client (browser) to puppeteer? - phantomjs

Question

I have been created a server side render by phantomjs before like this.
client side
// when all client ajax request and page render finished
window.callPhantom('page.done')
// when page not found
window.callPhantom('page.fail')
server side
page.onCallback = function(status) {
// when page render finished
if(status == 'page.done') {
// start render
}
// when page not found
else {
// response 404 page not found
}
}
And I wanna change from phantomjs to chrome puppeteer now.
How can I to pass data from the client side (browser) to server(puppeteer) after all client ajax request is finished (like phantomjs callPhantom).
Is it possible do that by using chrome puppeteer?

Answer 1

I had face the same problem as you, this is the solution what I got:
You can use the function page.exposeFunction.
It's going to bind a function into the page window, so you can just evaluate that function in the client side to do something in the Node side.
There's an example in the documentation.
I hope this can helps you.

Answer 2

Use page.evaluate(pageFunction, ...args) to pass data to the page. This example passes a selector string to the page for evaluation:
(async() => {
const puppeteer = require('puppeteer')
const browser = await puppeteer.launch()
const page = await browser.newPage()
page.on('console', msg => {
for (let i = 0; i < msg.args().length; ++i)
console.log(`${i}: ${msg.args()[i]}`);
});
await page.goto('https://google.com/')
await page.evaluate(selector => {
const el = document.querySelector(selector);
console.log(el.src)
}, 'img#hplogo');
await browser.close()
})();