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

Advertisement
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}
Advertisement
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:

Advertisement
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:
Advertisement
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 webpagen
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. Specify0
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
Advertisement
Conclusion Conclusion
Hope you enjoy this article. Try it yourself and let me know for any question. Some useful link:
Correction
Example 1:
capture-website https://wordpress.org/ wordpress.png
should be
capture-website https://wordpress.org/ –output wordpress.png
without –output flag output will be shown in stdout
Thanks for the suggestion. I have updated the suggested change.
hmm when I try to capture using the following command – on Win 10 and latest NPM … it just hangs indefinitely :/
>capture-website https://www.cnn.org/ –output=C:\screen-saver\try2\npm-cnn2.png –overwrite –timeout 20
If you terminate the process but pressing key CTRL + C then you can see the npm log in which you can seek all the details. Also you can add debug flag to see internal working processes.
Great article! just wondering if this could screenshot the whole window screen as well
As I aim to include the time of capture within the screenshot, therefore if we can screenshot the current date and time at the right bottom corner of window it would be prefect. If you have any thoughts, please help me, any advice will be so much appreciated, thanks a lot!
The cli tool just generate the screenshot. You add the time in the screenshot by modifying it with PHP script.