Using headless Chrome as an automated screenshot tool

Update 9/12/2017–Some of the techniques in this post may be out of date, consider checking out Puppeteer from the Chrome team, which offers an awesome API for screenshots with headless Chrome.

Starting with Chrome 57, we can run Chrome as a headless browser on linux servers. Capturing web page screenshots is a common use case for browser automation, and PhantomJS has always been my go-to solution for this, but let’s explore what this looks like using Node.js to drive headless Chrome:

And the setup required to run this code on a linux server (I used a Vagrant with Ubuntu Trusty Tahr):

Voila!

eff.org captured via headless chrome from a linux server

A couple thoughts after going through this process:

• Headless Chrome still has some rough edges (see the forceViewport edge case in the code above). I’m sure these kinks will be worked out quickly given the amount of attention this project is receiving.
• Tools like Nightmare or Phantom can still exist. Why? As of right now, the Chrome debugging protocol API and chrome-remote-interface bindings aren’t perfectly optimized for developer use cases. You’ll notice in our example there is some boilerplate required, and there is a lot of async code, which would’ve been painful to write without async/await. Passing around nodeIds for the DOM methods is also not ideal. There is still room for a library with a better API that uses headless Chrome as the underlying engine. [Update 9/12 /2017— see Puppeteer!]

All that said, I’m very optimistic about headless Chrome and believe that it’ll soon be the most reliable engine for browser automation on the server. For those that would like to start testing it as a screenshot tool, you can clone or fork this repo which contains the example code found in this post.