pageres
Capture website screenshots with specified resolutions
TLDR
Take multiple screenshots of multiple URLs at different resolutions
Provide specific options for a URL, overriding global options
Provide a custom filename template
Capture a specific element on a page
Hide a specific element
Capture a screenshot of a local file
SYNOPSIS
pageres <urls> <resolutions> [options]
PARAMETERS
A space-separated list of URLs to capture screenshots of. E.g., example.com google.com
A space-separated list of resolutions (viewport sizes) in the format 'widthxheight'. E.g., 1024x768 1280x800 1920x1080
-d, --delay
Delay capturing the screenshot by the specified number of seconds.
-f, --filename
Define a custom filename template. Use placeholders like <%= url %>
, <%= size %>
, and <%= date %>
.
-s, --selector
Capture only a specific element on the page using a CSS selector.
-c, --crop
Crop to the selector. Requires `--selector`.
-v, --verbose
Enable verbose output, providing more detailed information about the process.
-o, --output-dir
Specify the output directory for the screenshots. Defaults to the current directory.
--no-default-options
Disable the default Chrome/Chromium options.
--user-agent
Set a custom user agent string.
--cookies
Set cookies for the page. Expects a JSON string or a file path to a JSON file.
--script
Execute javascript on the page. Expects a file path to a JavaScript file.
--format
The format of the screenshot. Can be png
, jpeg
, or jpg
. Defaults to png
--quality
The quality of the jpeg screenshot. Possible values between 0
and 100
. Defaults to 75
--overwrite
Overwrite existing files.
DESCRIPTION
Pageres is a command-line tool that enables you to capture screenshots of websites in various resolutions. It's incredibly useful for responsive design testing, regression testing, and generating website previews. Pageres leverages Chrome or Chromium (headless mode) to render the websites and then saves the resulting images in specified directories with custom naming conventions.
It offers a simple way to automate the process of taking website snapshots, saving time and effort compared to manual screenshot methods. You can easily define multiple viewport sizes, specify the output directory, and customize the filenames. Pageres supports saving screenshots in various formats like PNG and JPG, and allows you to control image quality. The command can be integrated into build scripts, CI/CD pipelines, and other automated workflows to facilitate visual validation and reporting. Pageres significantly accelerates the process of verifying the visual consistency of websites across different devices and screen sizes.
CAVEATS
Pageres relies on Chrome or Chromium being installed. Ensure that either is correctly installed and accessible in your system's PATH. Also, ensure that the specified URLs are accessible. Capturing screenshots of sites with complex JavaScript or heavy content might require adjusting the delay to allow the page to fully load. Some websites may actively prevent headless browsers from capturing their content.
EXAMPLE USAGE
pageres example.com 1024x768 1280x800 -d 2
This command will take screenshots of example.com at resolutions 1024x768 and 1280x800, with a 2-second delay before each capture. pageres example.com 1920x1080 --filename <%= url %>_<%= size %>_<%= date %>
This will save the screenshot with a filename containing the URL, size and date.
TROUBLESHOOTING
If Pageres fails to capture a screenshot, check the following:
1. Ensure Chrome/Chromium is installed and accessible.
2. Verify the URL is correct and accessible.
3. Increase the delay if the page is slow to load.
4. Check the console output for any error messages.
HISTORY
Pageres emerged as a more modern alternative to older screenshotting tools like PhantomJS (which is now deprecated). It leverages the power of headless Chrome/Chromium, offering better compatibility with modern web technologies. It has evolved to include features like custom filename templates, selector-based cropping, and improved error handling, becoming a popular choice for automated website screenshotting.
SEE ALSO
wkhtmltoimage(1), phantomjs(1) (deprecated, consider using Pageres instead)