loading...
Cover image for 👟 Executing JavaScript in the page context of puppeteer

👟 Executing JavaScript in the page context of puppeteer

benjaminmock profile image Benjamin Mock ・1 min read

Super useful puppeteer snippets 💭💭💭 (8 Part Series)

1) 📷 How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) 📷 More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) 📷 More on Screenshots with JavaScript in Node.js (creating PDFs) 4) 🗄️ The easiest way to scrape a website with Javascript (in Node.js) 5) 🍪 Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) 👟 Executing JavaScript in the page context of puppeteer 8) 🚀 Performance measuring of a webpage with JavaScript in Node.js using puppeteer

So far we learned how to do Screenshots, how to create PDFs, how to set Cookies and how to click elements and type into pages using puppeteer.

Now we will learn how to execute our own JavaScript in a page context. In this example, we will again load the dev.to homepage, change the background by executing a JavaScript snippet and take a screenshot of the changed page.

First, let's make sure our snippet for changing the background color of the body of a page works. Just past that into the console.

document.body.style.background = "#000";

dev.to darkmode

dev.to Darkmode ;)

And now let's look at the complete example:

// npm i puppeteer
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // let's navigate to the dev.to homepage
  await page.goto('https://dev.to');

  // evaluate will run the function in the page context
  await page.evaluate(_ => {
    // this will be executed within the page, that was loaded before
    document.body.style.background = '#000';
  });

  // and let's take a screenshot
  await page.screenshot({
    path: 'home.png',
  });

  // we're done; close the browser
  await browser.close();
})();

Super useful puppeteer snippets 💭💭💭 (8 Part Series)

1) 📷 How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) 📷 More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) 📷 More on Screenshots with JavaScript in Node.js (creating PDFs) 4) 🗄️ The easiest way to scrape a website with Javascript (in Node.js) 5) 🍪 Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) 👟 Executing JavaScript in the page context of puppeteer 8) 🚀 Performance measuring of a webpage with JavaScript in Node.js using puppeteer

Posted on by:

benjaminmock profile

Benjamin Mock

@benjaminmock

I'm Ben, a Frontend Developer from Germany working at ebay

Discussion

markdown guide
 

Wanted to know can we execute the javascript code in the browser's console using puppeteer? If yes which method can be called to achieve the same?