by

Advanced Screenshots with Headless Chrome

If you haven’t heard, headless Chrome is now A Thing™. A few days ago I wrote a post on how to use Headless Chrome to grab some screenshots from the command line, using a dab o’node and a healthy dose of Promises.

Well, after a little more fiddling with it, I’ve got a version 2.0

What’s New

Well, use of the DevTools Protocol API didn’t change. What did change is the command line arguments. Now you can request one or many window widths, window heights, or urls. That’s with the addition of three new arguments:

--widths
list of widths
--heights
list of heights
--urls
list of urls

Sample Usage

Here’s small list possible commands that you could run now, in this version:

 node headless-screenshot_v2.js -w 1024 --url=http://google.com
 node headless-screenshot_v2.js -w 1024 -h 768 --url=http://google.com
 node headless-screenshot_v2.js --widths=1024,768 -h 768 --url=http://google.com
 node headless-screenshot_v2.js --widths=1024,768 --heights=1024,768 --url=http://google.com
 node headless-screenshot_v2.js --widths=1024,768 --urls=http://google.com, http://amazon.com

When to Use the New Options

This is super helpful for regression testing. At Tahzoo we have big projects that sometimes last several years. Not only that, Tahzoo specializes in delivering content management systems for really big companies. What better way to see how Tridion’s content looks at 5 different breakpoints than to grab screenshots at the command line. It saves testers a lot of time and clicks.

Not only that, I’m looking into how this could possibly be incorporated into Tridion, possibly as an Alchemy plugin, so that content authors could get snapshots of what their current page looks like without having to leave the content authoring experience. Headless Chrome has some potential beyond that which I’ll probably be looking into in the future…

The Code

If you want to use it, fork it, or whatever, here it is:

Tell me what you think