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


Research About the Right Tool 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? 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? 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 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:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
%d bloggers like this: