How to use the command pageres (with examples)

Pageres is a command-line tool that allows users to capture screenshots of websites in various resolutions. It is a convenient tool for web developers and designers who need to test the responsive design of their websites or for individuals who simply want to capture screenshots of websites for documentation or archival purposes.

Use case 1: Take multiple screenshots of multiple URLs at different resolutions

Code:

pageres https://example.com/ https://example2.com/ 1366x768 1600x900

Motivation: This use case is useful when you need to capture multiple screenshots of different websites in different resolutions. By providing the URLs and resolutions as arguments, Pageres will capture screenshots of each specified URL at each given resolution.

Explanation:

• https://example.com/ and https://example2.com/ are the URLs of the websites you want to capture screenshots of.
• 1366x768 and 1600x900 are the resolutions at which you want to capture the screenshots.

Example output: Pageres will capture screenshots of both https://example.com/ and https://example2.com/ at the resolutions specified. It will generate image files for each combination of URL and resolution.

Use case 2: Provide specific options for a URL, overriding global options

Code:

pageres [https://example.com/ 1366x768 --no-crop] [https://example2.com/ 1024x768] --crop

Motivation: In some cases, you may want to provide specific options for a particular URL, overriding the global options. This use case allows you to do that, giving you more control over the screenshot capture process.

Explanation:

• [https://example.com/ 1366x768 --no-crop] specifies the URL and resolution for which you want to provide specific options. In this case, it is https://example.com/ with 1366x768 resolution and the --no-crop option, which disables cropping of the screenshot.
• [https://example2.com/ 1024x768] specifies the URL and resolution without any specific options. In this case, it is https://example2.com/ with 1024x768 resolution.
• --crop is a global option that enables cropping of the screenshot. This option will be applied to all URLs unless overridden by specific options.

Example output: Pageres will capture a screenshot of https://example.com/ at 1366x768 resolution without cropping it, and a screenshot of https://example2.com/ at 1024x768 resolution with cropping enabled.

Use case 3: Provide a custom filename template

Code:

pageres https://example.com/ 1024x768 --filename='<%= date %> - <%= url %>'

Motivation: When capturing screenshots of multiple websites or at different points in time, it can be helpful to have unique and descriptive names for the resulting image files. This use case allows you to provide a custom filename template, making it easier to organize and identify the screenshots.

Explanation:

• https://example.com/ is the URL of the website you want to capture a screenshot of.
• 1024x768 is the resolution at which you want to capture the screenshot.
• --filename is an option that allows you to specify a custom filename template. The template can include variables such as <%= date %> (current date) and <%= url %> (URL of the website).

Example output: Pageres will capture a screenshot of https://example.com/ at 1024x768 resolution and save it with a filename in the format of YYYY-MM-DD - https://example.com/, where “YYYY-MM-DD” is the current date.

Use case 4: Capture a specific element on a page

Code:

pageres https://example.com/ 1366x768 --selector='.page-header'

Motivation: Sometimes you may only be interested in capturing a specific element of a webpage rather than the entire page. This use case allows you to specify a CSS selector to capture a specific element on the page.

Explanation:

• https://example.com/ is the URL of the website you want to capture a screenshot of.
• 1366x768 is the resolution at which you want to capture the screenshot.
• --selector is an option that allows you to specify a CSS selector for capturing a specific element on the page. In this case, .page-header is the selector for the element you want to capture.

Example output: Pageres will capture a screenshot of the element with the CSS selector .page-header on https://example.com/ at 1366x768 resolution.

Use case 5: Hide a specific element

Code:

pageres https://example.com/ 1366x768 --hide='.page-header'

Motivation: Similar to the previous use case, sometimes you may want to hide a specific element from the captured screenshot. This use case allows you to specify a CSS selector for hiding an element on the page.

Explanation:

• https://example.com/ is the URL of the website you want to capture a screenshot of.
• 1366x768 is the resolution at which you want to capture the screenshot.
• --hide is an option that allows you to specify a CSS selector for hiding an element on the page. In this case, .page-header is the selector for the element you want to hide.

Example output: Pageres will capture a screenshot of https://example.com/ at 1366x768 resolution, with the element that has the CSS selector .page-header hidden.

Use case 6: Capture a screenshot of a local file

Code:

pageres local_file_path.html 1366x768

Motivation: In addition to capturing screenshots of websites, Pageres also allows you to capture screenshots of local HTML files. This use case is useful when you are working with local HTML files and want to capture screenshots of them.

Explanation:

• local_file_path.html is the path to the local HTML file you want to capture a screenshot of.
• 1366x768 is the resolution at which you want to capture the screenshot.

Example output: Pageres will capture a screenshot of the local HTML file specified and save it at 1366x768 resolution.

Conclusion:

Pageres is a versatile command-line tool for capturing screenshots of websites in various resolutions. It offers a range of options and features, allowing users to capture multiple screenshots, specify specific options for different URLs, provide custom filename templates, capture specific elements or hide elements, and even capture screenshots of local HTML files. With its flexibility and ease of use, Pageres is a valuable tool for web developers, designers, and individuals who need to capture and document website screenshots.