Table of Contents
Syntax
In Puppeteer, page.evaluate() is a method that allows you to execute JavaScript code in the context of the page. This can be useful for interacting with the DOM (Document Object Model) or extracting information from the page. Here’s the basic syntax:
const result = await page.evaluate((arg1, arg2, ...) => {
// Your JavaScript code to be executed in the browser context
// You can use arg1, arg2, ... to pass parameters from Node.js to the browser context
// Return the result that you want to retrieve back to Node.js
return /* your result */;
}, arg1, arg2, ...);
arg1,arg2, …: These are parameters that you can pass from the Node.js environment to the browser context.- The function you provide as the first argument will be serialized and executed in the context of the page. It can access the DOM, manipulate the page, and perform other browser-related actions.
- The value returned by the function will be resolved as a Promise, and the resolved value will be available in the
resultvariable.
Example 1: Getting Text from a Page
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const headingText = await page.evaluate(() => document.querySelector('h1').textContent);
console.log(`The heading text is: "${headingText}"`);
await browser.close();
})();
Example 2: Automating Form Submission
// Assume there's a form with id 'login-form' that has 'username' and 'password' inputs
await page.evaluate(() => {
document.getElementById('username').value = 'myUsername';
document.getElementById('password').value = 'myPassword';
document.querySelector('#login-form').submit();
});
Example 3: Scraping Data from a Table
const tableData = await page.evaluate(() => {
const rows = Array.from(document.querySelectorAll('table tr'));
return rows.map(row => {
const columns = row.querySelectorAll('td');
return Array.from(columns, column => column.innerText);
});
});
console.log(tableData);
Example 4: DOM Manipulation
await page.evaluate(() => {
const div = document.createElement('div');
div.textContent = 'Added by Puppeteer';
document.body.appendChild(div);
});
Example 5: Capturing a Screenshot of a Selector
const element = await page.$('#my-selector');
await element.screenshot({ path: 'element.png' });
Example 6: Benchmarking Page Load Performance
const performanceTiming = await page.evaluate(() =>
JSON.parse(JSON.stringify(window.performance.timing))
);
console.log(performanceTiming);
Conclusive Summary
In summary, the ‘page.evaluate()’ method in Puppeteer offers an extensive range of possibilities for managing and extracting information from web pages. From fetching text to automating form submissions, manipulating the DOM, extracting table data, capturing screenshots, or even conducting performance benchmarking — the potential is vast. These examples provide a blueprint to harness the full power of Puppeteer for tasks that require complex page interactions.
