Tips on how to take a screenshot of a webpage with JavaScript

By | May 5, 2020

Robotically making a screenshot of a webpage was exhausting. Utilizing puppeteer it turned fairly easy. Puppeteer is a headless Chrome Node.js API. So you possibly can programmatically do every part you are able to do every part with it programmatically, that you just manually can do with the Chrome browser.

So let’s create a screenshot of my weblog over at codesnacks.

First, we’ll have to put in puppeteer after all. Run

to put in puppeteer.

const puppeteer = require("puppeteer");

// we're utilizing async/await - so we want an async perform, that we are able to run
const run = async () => {
  // open the browser and put together a web page
  const browser = await puppeteer.launch()
  const web page = await browser.newPage()

  // set the dimensions of the viewport, so our screenshot can have the specified dimension
  await web page.setViewport({
      width: 1280,
      top: 800

  await web page.goto('https://codesnacks.internet/')
  await web page.screenshot({
      path: 'codesnacks.png',
      fullPage: true

  // shut the browser 
  await browser.shut();

// run the async perform

That snippet will create a screenshot of the entire web page, that’s 1280 pixel vast. In fact, it’s also possible to set different sizes. The screenshot will probably be saved in the identical listing your script lives in. You may change the listing and identify of the file within the path.

That’s a brilliant easy technique to create screenshots. Please contemplate following me, in case you’re taken with what else you are able to do with puppeteer and in case you don’t need to miss any of my upcoming articles on this collection.


Supply hyperlink

Leave a Reply

Your email address will not be published. Required fields are marked *