Skip to main content

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!

Comments

Post a Comment

Popular posts from this blog

4 Ways to Communicate Across Browser Tabs in Realtime

1. Local Storage Events You might have already used LocalStorage, which is accessible across Tabs within the same application origin. But do you know that it also supports events? You can use this feature to communicate across Browser Tabs, where other Tabs will receive the event once the storage is updated. For example, let’s say in one Tab, we execute the following JavaScript code. window.localStorage.setItem("loggedIn", "true"); The other Tabs which listen to the event will receive it, as shown below. window.addEventListener('storage', (event) => { if (event.storageArea != localStorage) return; if (event.key === 'loggedIn') { // Do something with event.newValue } }); 2. Broadcast Channel API The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and  Web Workers . One Tab can create and post to a channel as follows. const channel = new BroadcastChannel('app-data'); channel.postMessage(data); And oth...
Post a Comment
Read more

Certbot SSL configuration in ubuntu

  Introduction Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free  TLS/SSL certificates , thereby enabling encrypted HTTPS on web servers. It simplifies the process by providing a software client, Certbot, that attempts to automate most (if not all) of the required steps. Currently, the entire process of obtaining and installing a certificate is fully automated on both Apache and Nginx. In this tutorial, you will use Certbot to obtain a free SSL certificate for Apache on Ubuntu 18.04 and set up your certificate to renew automatically. This tutorial will use a separate Apache virtual host file instead of the default configuration file.  We recommend  creating new Apache virtual host files for each domain because it helps to avoid common mistakes and maintains the default files as a fallback configuration. Prerequisites To follow this tutorial, you will need: One Ubuntu 18.04 server set up by following this  initial ...
Post a Comment
Read more

Working with Node.js streams

  Introduction Streams are one of the major features that most Node.js applications rely on, especially when handling HTTP requests, reading/writing files, and making socket communications. Streams are very predictable since we can always expect data, error, and end events when using streams. This article will teach Node developers how to use streams to efficiently handle large amounts of data. This is a typical real-world challenge faced by Node developers when they have to deal with a large data source, and it may not be feasible to process this data all at once. This article will cover the following topics: Types of streams When to adopt Node.js streams Batching Composing streams in Node.js Transforming data with transform streams Piping streams Error handling Node.js streams Types of streams The following are four main types of streams in Node.js: Readable streams: The readable stream is responsible for reading data from a source file Writable streams: The writable stream is re...
Post a Comment
Read more