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: