TAKE SCREENSHOT OF PAGE WITH NODEJS

Have you ever wanted to take screenshot of a page using NodeJs? Then this is the right place for you to come.

Taking screenshots of webpages might come handy to you in various places of development. You might want to take the screenshot of a webpage at a particular time and you want to write a Node script for it or maybe you want to use it as a feature in your web application. Or maybe you want to screenshot the webpage of your crush on instagram when they upload a new picture? Who am I to judge ?

I remember the times when this task used to be really difficult and require us to write many lines of code and maybe use Canvas or many other things. But in this article, we’ll be doing it very easily and fast using a great npm package.

You can take the screenshot of a page using NodeJS with the puppeteer library.

Puppeteer

First, let me just give you a brief overview of the puppeteer library in case you have never used or heard of this library.

Puppeteer is an amazing library developed by the fine folks at Google that allows you to totally control your browser using NodeJS. It was originally written with Chrome and Chromium and I still use it with them only but I guess even Firefox is supported now.

Okay, so the most important use of Puppeteer could be testing but I’ll just jot some of the uses down that they themselves advertise :-

• Taking screenshots and creating PDFs
• Crawl websites and single page applications easily
• Automate form submission, interact with the UI and everything related to UI testing
• Capture timeline trace of your website

The feature we are most interested in right now is the first one, the ability to take screenshots using puppeteer fairly easily.

Installing puppeteer

Puppeteer is packed with a whole plethora of features but is still an NPM package at the end of the day. So, just like any other package you can easily install it in your project using :-

1	npm i puppeteer

Note that this would also download Chromium along that would automatically support puppeteer connection with it and I highly recommend you to use this command to install puppeteer. Still, if you do not want to install the browser along with it, you can use this command instead :-

1	npm i puppeteer-core

For more information related to puppeteer vs puppeteer core you can visit this link -> https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#puppeteer-vs-puppeteer-core

Note that this has installed puppeteer just inside your project and not globally.

Using puppeteer

Create a new file called index.js and write the following code into it to start the browser with puppeteer :-

Take screenshot of page in NodeJS code

Yes, just these many lines of code!

Let us see what these lines do one by one. First of, we just import puppeteer into our file here. Next, we’ve written an asynchronous anonymous function. If you do not know what anonymous function is, it is nothing but a function that has no name. This function here infact is called an IIFE, immediately invoked function expression because we call it immediately as it gets written.

Inside this IIFE, the first line of code launches the browser. Please note that every action puppeteer does has to be pre-pended with the await keyword as all theses actions are asynchronous in nature. So, we open the browser by passing in an option of headless: false, what this will do is actually open the browser when you run this file. You can pass headless:true for the browser not to open during the execution.

In the second line we create a new browser page. In the next line we travel to a certain URL of your choice, I’ve added a youtube link here for my file. The waitUntil parameter that is passed along is actually for waiting until some event happens on the webpage. We have used the value of networkIdle2, so as to wait until at most 2 requests are pending on that page. Note -> Do not use networkIdle0 because in most cases those are open always for websockets or something.

Now, you’re basically on the page that gets loaded on that URL you entered. Taking the screenshot is the easiest part of the code as you only need to call the method screenshot with an argument telling where and what name should the screenshot be saved as.

At the end of the function, we just use the close method to close our browser. Go to your directory where you saved the screenshot and voila! You can see your page’s screenshot there. Yes, as easy as that!