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'])
.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: boolean
Default: false
Crop to the set height.
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/
becomesyeoman.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 truedate
: The current date (Y-M-d), eg. 2015-05-18time
: 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.
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 |
MIT © Sindre Sorhus