About
How to expose, inject javascript function in a Puppeteer page
Puppeteer communicate with the browser via the DevTools Protocol (Chrome Debugging Protocol.). It requires to pass a stringified function.
You have to pass the whole function or expose it to the browsers context.
Options
- page.evaluateOnNewDocument
- page.evaluate
- page.exposeFunction - only to inject a node function (no window property) - The function exposed will return a Promise because it will not be running inside the browser, but inside node.
- page.addScriptTag
exposeFunction
A common pattern is to expose a node function to get back object in the node environment
Example with an array of link
const links = [];
await this._page.exposeFunction('pushToLinks', link => {
links.push(link);
});
await this._page.evaluate(() => {
document.querySelectorAll('a[href]')
.forEach(link => {
window.pushToLinks(link.href);
});
});
addScriptTag
Adds a <script> tag into the page with the desired url or content. Shortcut for page.mainFrame().addStyleTag(options)
Example:
const jQueryPath = require.resolve('jquery');
await page.addScriptTag({ path: jQueryPath });
page.evaluate
- Return an object
const result = await page.evaluate(() => {
let title = document.querySelector('h1').innerText;
let price = document.querySelector('.price_color').innerText;
return {
title,
price
}
});
- Return an array
const result = await page.evaluate(() => {
let data = [];
// Scrap
let elements = document.querySelectorAll('xxx');
data.push(...);
return data;
});