Capture Website CLI

In this article we are going to see how to capture website screenshot with command line interface.

We are going to see:

#Introduction Introduction

Before writing about how to create a website screenshot of website with CLI command, I think, I need to share some background.

Recently, I was working on some project in which I need to set 1000+ web page screenshots and resize them and set as a featured featured image for the post.

In this article I’ll just share how to capture the website screenshot with the CLI command. I’ll create another article to share how I resized the screenshot and set the featured images in future articles.

Top ↑

#Research Research

I have research about this and found some below tools.

• PhantomJS
• CutyCapt
• wkhtmltoimage
• capture-website-cli

After some research, I have tried all of the above tools and finally select the capture-website-cli because of it fulfill all my requirement and also create better screenshots.

Reasons to choose the capture-website-cli:

• We can set timeout while creating screenshot.
• We can set delay while creating screenshot.
• We can inject JS/CSS while creating screenshot.
• We can create full page screenshot.
• We can set emulate device.
• We can set authentication
• We can set PHP headers
• much more..

capture-website-cli internally use the Puppeteer (Chrome).

---

Top ↑

#How to Install capture-website-cli? How to Install capture-website-cli?

• Create a folder e.g. capture-website-cli
• Open terminal and execute command:

npm install --global capture-website-cli

After executing above command capture-website-cli install the Google Puppeteer.

You can see something similar like below screenshot:

To check it install successfully type below command:

capture-website --help

After tying above command you can see like:

Top ↑

#How to use capture-website-cli? How to use capture-website-cli?

To use the capture-website-cli is pretty simple. Just add the website url and the name of the image.

#Syntax Syntax

The syntax of using capture-website-cli is pretty simple.

capture-website {Website} {image}

Top ↑

#Examples Examples

For testing I have use the website wordpress.org

#Example 1 Example 1

capture-website https://wordpress.org/ --output=wordpress.png

After executing above command the screenshot is generated like below:

Top ↑

#Example 2 Example 2

This is very interesting example. See below command.

I just want to highlight the Inject feature in which we can inject our custom CSS & JS while creating the screenshot.

capture-website https://wordpress.org/ --output=wordpress-by-mahesh.png --script="script.js"

After executing the above command below screenshot is generated.

In above screenshot the string Mahesh Waghmare and This Screenshot is generated with 'capture-website-cli'. And also the string "Mahesh Waghmare" and this paragraph both are also injected with the JavaScript while creating https://wordpress.org/ web page screenshot.

Both are added though JS by injecting it with custom JS file while creating screenshot.

In above command the parameter --script is used. In which the script.js is set. And in this JS file I have write the below code:

	window.onload = function() {
	var x = document.querySelectorAll("h1");
	x[1].innerHTML = "Mahesh Waghmare";
	var x = document.querySelectorAll(".subheading");
	x[1].innerHTML = "This Screenshot is generated with `capture-website-cli`. And also the string \"Mahesh Waghmare\" and this paragraph both are also injected with the JavaScript while creating https://wordpress.org/ web page screenshot.";
	};

view raw inject-custom-markup.js hosted with ❤ by GitHub

Top ↑

#Additional Parameters Additional Parameters

Don’t forget try below parameters too. These are interesting.

• --width Page width [default: 1280]
• --height Page height [default: 800]
• --type Image type: png|jpeg [default: png]
• --quality Image quality: 0…1 (Only for JPEG) [default: 1]
• --scale-factor Scale the webpage n times [default: 2]
• --list-devices Output a list of supported devices to emulate
• --emulate-device Capture as if it were captured on the given device
• --full-page Capture the full scrollable page, not just the viewport
• --no-default-background Make the default background transparent
• --timeout Seconds before giving up trying to load the page. Specify 0 to disable. [default: 60]
• --delay Seconds to wait after the page finished loading before capturing the screenshot [default: 0]
• --wait-for-element Wait for a DOM element matching the CSS selector to appear in the page and to be visible before capturing the screenshot
• --element Capture the DOM element matching the CSS selector. It will wait for the element to appear in the page and to be visible.
• --hide-elements Hide DOM elements matching the CSS selector (Can be set multiple times)
• --remove-elements Remove DOM elements matching the CSS selector (Can be set multiple times)
• --click-element Click the DOM element matching the CSS selector
• --scroll-to-element Scroll to the DOM element matching the CSS selector
• --disable-animations Disable CSS animations and transitions [default: false]
• --module Inject a JavaScript module into the page. Can be inline code, absolute URL, and local file path with .js extension. (Can be set multiple times)
• --script Same as --module, but instead injects the code as a classic script
• --style Inject CSS styles into the page. Can be inline code, absolute URL, and local file path with .css extension. (Can be set multiple times)
• --header Set a custom HTTP header (Can be set multiple times)
• --user-agent Set the user agent
• --cookie Set a cookie (Can be set multiple times)
• --authentication Credentials for HTTP authentication
• --debug Show the browser window to see what it’s doing
• --launch-options Puppeteer launch options as JSON
• --overwrite Overwrite the destination file if it exists

Top ↑

#Conclusion Conclusion

Hope you enjoy this article. Try it yourself and let me know for any question. Some useful link:

• capture-website-cli