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.
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);
});
});
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 });
const result = await page.evaluate(() => {
let title = document.querySelector('h1').innerText;
let price = document.querySelector('.price_color').innerText;
return {
title,
price
}
});
const result = await page.evaluate(() => {
let data = [];
// Scrap
let elements = document.querySelectorAll('xxx');
data.push(...);
return data;
});