loading...
Cover image for πŸ“· How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer)

πŸ“· How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer)

benjaminmock profile image Benjamin Mock Originally published at codesnacks.net ・Updated on ・1 min read

Automatically creating a screenshot of a webpage used to be hard. Using puppeteer it became quite simple. Puppeteer is a headless Chrome Node.js API. So you can programmatically do everything you can do everything with it programmatically, that you manually can do with the Chrome browser.

So let's create a screenshot of my blog over at codesnacks.

First, we'll have to install puppeteer of course. Run

npm i puppeteer

to install puppeteer.

const puppeteer = require("puppeteer");

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  // open the browser and prepare a page
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  // set the size of the viewport, so our screenshot will have the desired size
  await page.setViewport({
      width: 1280,
      height: 800
  })

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

  // close the browser 
  await browser.close();
};

// run the async function
run();

Codesnacks Screenshot

That snippet will create a screenshot of the whole page, that's 1280 pixel wide. Of course, you can also set other sizes. The screenshot will be saved in the same directory your script lives in. You can change the directory and name of the file in the path.

That's a super simple way to create screenshots. Please consider following me, if you're interested in what else you can do with puppeteer and if you don't want to miss any of my upcoming articles in this series.

Discussion

pic
Editor guide
Collapse
karataev profile image
Eugene Karataev

Puppeteer indeed is a very powerful tool to work with webpages. Looking forward for more posts exploring puppeteer features.
Just a reminder, that it's possible to use devtools for simple webpage screenshots.

  • Run command

one

  • Capture full size screenshot

two

Collapse
benjaminmock profile image
Benjamin Mock Author

That's true. If you want to do it manually, that's a very good tip. In my case I had to prepare a couple of hundred screenshots, so I needed a tool to automate this task. And with puppeteer it was surprisingly simple.

Collapse
karataev profile image
Eugene Karataev

Sure, puppeteer is great to automate routine tasks. I used it for web crawling and pdf generation and had a smooth experience.

Collapse
crisenitan profile image
Chris Enitan

This would really be good for automating tasks, especially in some test cases.
However when I read the title I must say I really hoped it would be vanilla JS but hey neither Node js nor Puppeteer are far off that.

Collapse
benjaminmock profile image
Benjamin Mock Author

True, I adjusted the title to include both, Node.js and puppeteer. Thanks for the hint!

Collapse
x1k profile image
Asaju Enitan

I love it, I am already imagining things I could do with it

  1. Make a user get the screenshot of his own profile page
  2. get the results from a page
  3. print student IDs all of these are now possible with just a click away UwU
Collapse
agorovyi profile image
anatolii gorovyi

If only puppeteer could take screenshots across all major browsers, it would've been a clear winner amongst other tools for automation.

Collapse
benjaminmock profile image
Benjamin Mock Author

Actually there's an experimental version for FireFox

github.com/puppeteer/puppeteer/tre...

Collapse
agorovyi profile image
anatolii gorovyi

Yeah, I've seen that. Need Safari and Edge, too. Although with Edge using Chromium that may become possible. Safari on the other hand has been a pain.

Collapse
frases profile image
frases

Hey Ben,
Thanks very much for this tutorial, it was very helpful to me.

One of the issues I see is that occasionally, there are variable results in the colors rendered in the captured image. Specifically, in maybe 1 out of 20 captures, you'll get bands of different colors when the image is rendered to a png (see attached, where dark blue band appears). The problem is that after I grab an image off of the web, I then use OpenCV to identify objects in the image. So when the colors rendered change, OpenCV flips out and doesn't read the image correctly. Have you seen this behavior before?

For some reason, the UI refreshed w/my edit, but didn't show me my attachment, so here is the link to it:
dev-to-uploads.s3.amazonaws.com/i/...

frases

Collapse
frases profile image
frases

As a follow-up to my post, I did two things which ended up improving my situation and giving me more consistent results:
1) I also tried using an older technology, the Chrome headless browser. Info on that here:
blog.frankmtaylor.com/2017/06/16/s...
developers.google.com/web/updates/...
gist.github.com/paceaux/353fc20eb6...

2) Instead of using a full page screenshot, I grabbed the image element from the DOM. Info on how to do that here:
intoli.com/blog/saving-images/

EDIT: Actually, only the Chrome headless ended up eliminating the number of incorrect image renderings to only one or two a day (my program runs once every minute).

frases

Collapse
seanmclem profile image
Seanmclem

How to take a screenshot with Javascript in NodeJS

Collapse
benjaminmock profile image
Benjamin Mock Author

On the server, yes. If you want to do it on the client, you can use canvas.

Collapse
seanmclem profile image
Seanmclem

I've tried to do advanced rendering in the canvas before for screenshots, and while possible, server-side is so significantly easier and better.

Thread Thread
benjaminmock profile image