Executing JavaScript in Puppeteer with page.evaluate

Product Support
, ,
#1

How to use Puppeteer’s page.evaluate method to run JavaScript code in the context of the page?

#2

I have extensive experience with Puppeteer and using its page.evaluate method to execute JavaScript within the page context. Let’s dive into how you can leverage this feature effectively.

const puppeteer = require('puppeteer');

async function runCodeInPage() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Example: Get the title of the page
    const pageTitle = await page.evaluate(() => {
        return document.title;
    });
    
    console.log('Page Title:', pageTitle);

    await browser.close();
}

runCodeInPage();

This is a straightforward and commonly used approach. It allows you to execute JavaScript code directly within the context of the page, accessing its DOM and other properties seamlessly. Great for basic tasks like extracting information or manipulating elements.

#3

I’ve got some tricks up my sleeve for enhancing your Puppeteer scripts! Check out this alternative approach to using page.evaluate by injecting external scripts directly into the page.

const puppeteer = require('puppeteer');

async function runCodeInPage() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Example: Injecting jQuery and using it to manipulate the page
    await page.evaluate(() => {
        const script = document.createElement('script');
        script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
        document.head.appendChild(script);
    });

    const pageTitle = await page.evaluate(() => {
        // Using jQuery to get the title of the page
        return $('title').text();
    });

    console.log('Page Title:', pageTitle);

    await browser.close();
}

runCodeInPage();

This method opens up possibilities for utilizing external libraries like jQuery within your Puppeteer scripts, enabling advanced manipulation and interaction with the page elements.

#4

Let me introduce you to a neat little trick to make your Puppeteer scripts even more dynamic using the eval() function.

const puppeteer = require('puppeteer');

async function runCodeInPage() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const searchTerm = 'example'; // Example search term

    // Example: Using page.evaluate to search for a term on the page
    const searchResults = await page.evaluate((term) => {
        // Custom logic to search for the term and return results
        const results = document.querySelectorAll(`[data-searchable*="${term}"]`);
        return Array.from(results).map(el => el.textContent);
    }, searchTerm);

    console.log('Search Results:', searchResults);

    await browser.close();
}

runCodeInPage();

By passing arguments to page.evaluate, you can dynamically alter the behavior of your script, making it adaptable to various scenarios and use cases. This approach adds a layer of flexibility to your Puppeteer automation.