Nanoseconds Produce Minutes
    Have ideas to improve npm?Join in the discussion! »

    smartnose-pageres
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.0 • Public • Published

    pageres

    Build Status Coverage Status XO code style

    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.

    Install

    $ npm install pageres
    

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

    Usage

    const Pageres = require('pageres');
     
    (async () => {
        await new Pageres({delay: 2})
            .src('https://github.com/sindresorhus/pageres', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
            .src('https://sindresorhus.com', ['1280x1024', '1920x1080'])
            .src('data:text/html,<h1>Awesome!</h1>', ['1024x768'])
            .dest(__dirname)
            .run();
    })();

    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<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.

    filename

    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 (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.

    pageres.src(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 <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.

    options

    Type: object

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

    pageres.dest(directory)

    Set the destination directory.

    directory

    Type: string

    pageres.run()

    Run pageres. Returns Promise<Buffer[]>.

    Task runners

    Check out 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 - Desktop app for capturing screenshots of responsive websites.

    Related

    Install

    npm i smartnose-pageres

    DownloadsWeekly Downloads

    0

    Version

    5.2.0

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar