How to capture website screenshot with CLI (Command Line Interface)

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 was resize the screenshot and set the featured images in future articles.


Research About the Right Tool

I have research about this and found some below tools.

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 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).


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 it install the Google Chrome. It looks like below screenshot.

Install the capture-website-cli tool.

To check it install successfully type below command:
capture-website --help

After tying above command you can see like:

Confirm capture-website-cli is installed successfully.

How to use?

For testing I have use the website wordpress.org

Syntax:

capture-website {Website} {image}

Example 1:

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

After executing above command the screenshot is generated like below:

Screenshot with capture-website-cli tool.

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/ 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:


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

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

How to find broken links of website using command line interface (CLI) (Using wget)

Check the broken links on website using. Try below example command which generate the wget.log it list all the broken links.

  1. Download & Install wget
  2. Add the installation directory to PATH:
    C:\Program Files (x86)\GnuWin32\bin

Syntax:

wget -o wget.log -r -l 10 --spider http://example.com

Usage:

wget -o wget.log -r -l 10 --spider https://maheshwaghmare.wordpress.com --no-check-certificate

Output:

Spider mode enabled. Check if remote file exists.
--2018-06-29 10:11:59-- https://maheshwaghmare.wordpress.com/
Connecting to maheshwaghmare.wordpress.com|192.0.78.12|:443... connected.
WARNING: cannot verify maheshwaghmare.wordpress.com's certificate, issued by `/C=US/ST=Arizona/L=Scottsdale/O=GoDaddy.com, Inc./OU=http://certs.godaddy.com/repository//CN=Go Daddy Secure Certificate Authority - G2':
Unable to locally verify the issuer's authority.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/html]
Saving to: `maheshwaghmare.wordpress.com/index.html'

0K .......... .......... .......... .......... .......... 318K
50K .......... .......... .......... .......... .......... 80.5K
100K .......... .......... .......... .......... .......... 664K
150K .......... .......... .......... .......... .......... 2.07M
200K ..... 5.80M=0.9s

2018-06-29 10:12:01 (234 KB/s) - `maheshwaghmare.wordpress.com/index.html' saved [210113]