Screenshots

Use puppeteer to take screenshots of a list of URLs for multiple viewports

Installation

yarn add --global screenshots-cli

CLI Usage

  Take screenshots for a list of URLs and viewports

  Usage
    $ screenshots

  Options
    --version          Output version
    --urls             List of comma-separated URLs to visit. (Must include protocol)
    --viewports        List of comma-separated viewport dimensions to take screenshots.
                          Specify both width and height like: 1440x768,768x768
                          OR only specify the width to capture the entire page.
                          You can use a combination of both.

    --outputDir, -o    Screenshots directory name. Defaults to $pwd/screenshots
    --emptyDir, -rm    Empty the output directory

  Authentication Options
    --loginUrl         URL to authenticate with username/password
    --username, -u     Auth username
    --password, -p     Auth password

  Examples
    $ screenshots \
        --urls=https://mysite.com \
        --viewports=1440x768,768,480,320

Programmatic Usage

const path = require('path')
const screenshots = require('screenshots-cli')

screenshots({
  urls: ['https://mysite.com/login'],
  viewports: [
    [1440, 768], // [width, height] - height is optional
  ],
  outputDir: path.join(process.cwd(), 'screenshots'), // default
})
  .then()
  .catch()

Usage with auth

const path = require('path')
const screenshots = require('screenshots-cli')

screenshots({
  urls: ['https://mysite.com'],
  loginUrl: 'https://mysite.com/login',
  username: process.env.USERNAME,
  password: process.env.PASSWORD,
})
  .then()
  .catch()

Customising login form selectors

const path = require('path')
const screenshots = require('screenshots-cli')

screenshots({
  urls: ['https://mysite.com/myaccount'],
  loginUrl: 'https://mysite.com/login',
  username: process.env.USERNAME,
  password: process.env.PASSWORD,
  selectors: {
    username: 'input[type="username"]',
    password: 'input[type="password"]',
    submit: 'input[type="submit"]',
  },
})
  .then(results => {
    // Returns array of screenshot objects
    // See below for results type definition
  })
  .catch()

Results schema

[
  {
    filename: String,
    createdAt: Date,
    uri: Base64
  },
  ...
]

Options

| Option | Type | Required | Default | Description | | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | | urls | Array | Yes | | Array of URLs to visit | | viewports | Array | | [[1440], [768], [425], [320]] | Viewport dimensions to take for each URL | | outputDir | String | | path.join(process.cwd(), 'screenshots') | Directory to write screenshots | | emptyDir | Boolean | | false | Empty the output directory | | loginUrl | String | | | URL to authenticate | | username | String | | | Auth username | | password | String | | | Auth password | | selectors | Object | | { username: 'input[type="email"]', password: 'input[type="password"]', submit: 'form button' } | HTMLElement selectors for login form |

Running locally

Unauthenticated routes

yarn start --urls=https://mysite.com

Authenticated routes

You will be prompted for your username and password. The password will be hidden

yarn start:auth --urls=https://mysite.com/myaccount

Diffing two images

Make sure you have imagemagick installed locally:

brew install imagemagick

Compare images:

compare screenshots/one.png screenshots/two.png [-highlight-color blue] -compose src diff.png