Capture Website CLI

Advertisement

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.

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:

Install the capture-website-cli tool.
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.
Confirm capture-website-cli is installed successfully.

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:

Capture Website CLI 1
Screenshot with capture-website-cli tool.

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.

Custom Generated WordPress.org page
Custom Generated WordPress.org page

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.";
};

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:

Leave a Reply