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 --save pageres

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall pageres if that happens.

const Pageres = require('pageres');

const pageres = new Pageres({delay: 2})
	.src('yeoman.io', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
	.src('todomvc.com', ['1280x1024', '1920x1080'])
	.src('data:text/html;base64,PGgxPkZPTzwvaDE+', ['1024x768'])
	.dest(__dirname)
	.run()
	.then(() => console.log('done'));

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 PhantomJS aborts the request.

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: array of string, object

A string with the same format as a browser cookie or an object of what phantomjs.addCookie accepts.

Go to the website you want a cookie for and copy-paste it from Dev Tools.

Type: string

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 (Y-M-d), eg. 2015-05-18
• time: The current time (h-m-s), eg. 21-15-11

Type: string

Capture a specific DOM element.

Type: array

Hide an array of DOM elements.

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.

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: array

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 a promise for an array of streams.

Warnings with e.g. page errors.

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.

Sindre Sorhus	Kevin Mårtensson	Sam Verschueren

MIT © Sindre Sorhus