Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.

See pageres-cli for the command-line tool.

npm install pageres

Note to Linux users: If you get a "No usable sandbox!" error, you need to enable system sandboxing.

import Pageres from 'pageres';

await new Pageres({delay: 2})
	.source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768'], {crop: true})
	.source('https://sindresorhus.com', ['1280x1024', '1920x1080'])
	.source('data:text/html,<h1>Awesome!</h1>', ['1024x768'])
	.destination('screenshots')
	.run();

console.log('Finished generating screenshots!');

Type: object

Type: number (Seconds)
Default: 0

Delay capturing the screenshot.

Useful when the site does things after load that you want to capture.

Type: number (Seconds)
Default: 60

Number of seconds after which the request is aborted.

Type: boolean
Default: false

Crop to the set height.

Type: string

Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.

Type: string

Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file.

Type: Array<string | object>

A string with the same format as a browser cookie or an object.

Tip: Go to the website you want a cookie for and copy-paste it from DevTools.

Type: string
Default: '<%= url %>-<%= size %><%= crop %>'

Define a customized filename using Lo-Dash templates.
For example: <%= date %> - <%= url %>-<%= size %><%= crop %>.

Available variables:

• url: The URL in slugified form, eg. http://yeoman.io/blog/ becomes yeoman.io!blog
• size: Specified size, eg. 1024x1000
• width: Width of the specified size, eg. 1024
• height: Height of the specified size, eg. 1000
• crop: Outputs -cropped when the crop option is true
• date: The current date (YYYY-MM-DD), eg. 2015-05-18
• time: The current time (HH-mm-ss), eg. 21-15-11

Type: boolean
Default: false

When a file exists, append an incremental number.

Type: string

Capture a specific DOM element matching a CSS selector.

Type: string[]

Hide an array of DOM elements matching CSS selectors.

Type: string

Username for authenticating with HTTP auth.

Type: string

Password for authenticating with HTTP auth.

Type: number
Default: 1

Scale webpage n times.

Type: string
Default: png
Values: 'png' | 'jpg'

Image format.

Type: string

Custom user agent.

Type: object

Custom HTTP request headers.

Type: boolean
Default: false

Set background color to transparent instead of white if no background is set.

Type: boolean
Default: false

Emulate preference of dark color scheme.

Type: object
Default: {}

Options passed to puppeteer.launch().

Type: Function

The specified function is called right before the screenshot is captured, as well as before any bounding rectangle is calculated as part of options.element. It receives the Puppeteer Page instance as the first argument and the browser instance as the second argument. This gives you a lot of power to do custom stuff. The function can be async.

Note: Make sure to not call page.close() or browser.close().

import Pageres from 'pageres';

await new Pageres({
	delay: 2,
	beforeScreenshot: async (page, browser) => {
		await checkSomething();
		await page.click('#activate-button');
		await page.waitForSelector('.finished');
	}
})
	.source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
	.destination('screenshots')
	.run();

console.log('Finished generating screenshots!');

Add a page to screenshot.

Required
Type: string

URL or local path to the website you want to screenshot. You can also use a data URI.

Required
Type: string[]

Use a <width>x<height> notation or a keyword.

A keyword is a version of a device from this list.

You can also pass in the w3counter keyword to use the ten most popular resolutions from w3counter.

Type: object

Options set here will take precedence over the ones set in the constructor.

Set the destination directory.

Type: string

Run pageres.

Returns Promise<Uint8Array[]>.

Check out grunt-pageres if you're using Grunt.

For Gulp and Broccoli, just use the API directly. No need for a wrapper plugin.

• Break Shot - Desktop app for capturing screenshots of responsive websites.

• capture-website - A different take on screenshotting websites