Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sindresorhus/pageres

Capture website screenshots
https://github.com/sindresorhus/pageres

Last synced: 7 days ago
JSON representation

Capture website screenshots

Awesome Lists containing this project

README 

        
# ![pageres](media/promo.png)



[![Coverage Status](https://codecov.io/gh/sindresorhus/pageres/branch/main/graph/badge.svg)](https://codecov.io/gh/sindresorhus/pageres)

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)



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](https://github.com/sindresorhus/pageres-cli) for the command-line tool.*



## Install



```sh

npm install pageres

```



Note to Linux users: If you get a "No usable sandbox!" error, you need to enable [system sandboxing](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#setting-up-chrome-linux-sandbox).



## Usage



```js

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,
Awesome!
', ['1024x768'])

	.destination('screenshots')

	.run();



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

```



## API



### Pageres(options?)



#### options



Type: `object`



##### delay



Type: `number` *(Seconds)*\

Default: `0`



Delay capturing the screenshot.



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



##### timeout



Type: `number` *(Seconds)*\

Default: `60`



Number of seconds after which the request is aborted.



##### crop



Type: `boolean`\

Default: `false`



Crop to the set height.



##### css



Type: `string`



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



##### script



Type: `string`



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



##### cookies



Type: `Array`



A string with the same format as a [browser cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) or [an object](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetcookiecookies).



Tip: Go to the website you want a cookie for and [copy-paste it from DevTools](https://stackoverflow.com/a/24961735/64949).



##### filename



Type: `string`\

Default: `'<%= url %>-<%= size %><%= crop %>'`



Define a customized filename using [Lo-Dash templates](https://lodash.com/docs#template).\

For example: `<%= date %> - <%= url %>-<%= size %><%= crop %>`.



Available variables:



- `url`: The URL in [slugified](https://github.com/sindresorhus/filenamify-url) 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



##### incrementalName



Type: `boolean`\

Default: `false`



When a file exists, append an incremental number.



##### selector



Type: `string`



Capture a specific DOM element matching a CSS selector.



##### hide



Type: `string[]`



Hide an array of DOM elements matching CSS selectors.



##### username



Type: `string`



Username for authenticating with HTTP auth.



##### password



Type: `string`



Password for authenticating with HTTP auth.



##### scale



Type: `number`\

Default: `1`



Scale webpage `n` times.



##### format



Type: `string`\

Default: `png`\

Values: `'png' | 'jpg'`



Image format.



##### userAgent



Type: `string`



Custom user agent.



##### headers



Type: `object`



Custom HTTP request headers.



##### transparent



Type: `boolean`\

Default: `false`



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



##### darkMode



Type: `boolean`\

Default: `false`



Emulate preference of dark color scheme.



##### launchOptions



Type: `object`\

Default: `{}`



Options passed to [`puppeteer.launch()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions).



##### beforeScreenshot



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](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) as the first argument and the [`browser` instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-browser) 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()`.



```js

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!');

```



### pageres.source(url, sizes, options?)



Add a page to screenshot.



#### url



*Required*\

Type: `string`



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



#### sizes



*Required*\

Type: `string[]`



Use a `x` notation or a keyword.



A keyword is a version of a device from [this list](https://github.com/kevva/viewport-list/blob/master/data.json).



You can also pass in the `w3counter` keyword to use the ten most popular resolutions from [w3counter](http://www.w3counter.com/globalstats.php).



#### options



Type: `object`



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



### pageres.destination(directory)



Set the destination directory.



#### directory



Type: `string`



### pageres.run()



Run pageres.



Returns `Promise`.



## Task runners



Check out [grunt-pageres](https://github.com/sindresorhus/grunt-pageres) if you're using Grunt.



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



## Built with Pageres



- [Break Shot](https://github.com/victorferraz/break-shot) - Desktop app for capturing screenshots of responsive websites.



## Related



- [capture-website](https://github.com/sindresorhus/capture-website) - A different take on screenshotting websites