jeremyalan / slapshot

Takes web screenshots at various sizes

slapshot

Takes web screenshots at various sizes

Configuration

Common

This section contains the configuration that applies to all the screens.

Options

baseUrl	The base URL, which will be prepended to all the screen paths to generate the screenshot.
queryParams.*	Contains a list of key-value pairs that will be appended to the URL of each page as query parameters.
options.*	Contains additional options, that will be passed to the screenshot service. https://www.npmjs.com/package/electron-screenshot-service

Sample usage:

baseUrl: https://www.example.com
queryParams:
  sessionKey: b9f57f10-819a-4f1e-a5fa-e43a1492b17a

Screens

This section describes the screens you want to capture. Hopefully, you're using server-side rendering or a JavaScript routing library for your app that allows you to navigate directly to a particular part of your application without manually clicking through the UI. This is usually an opportunity to grab a few screens that highlight specific functionality within your app.

Options

name	The name of the screen. This value is used when generating filenames for the output files, for easy identification.
path	The relative path to the screen. This path will be appended to the Base URL provided in the top-level configuration.
options.css	Allows you to include custom styles on the page before capturing the screenshot.
options.js	Allows you to run a custom script on the page before capturing the screenshot.
options.*	Contains additional options, that will be passed to the screenshot service. https://www.npmjs.com/package/electron-screenshot-service

Sample usage:

screens:
  - name: Home
    path: /home
  
  - name: Login
    path: /login

Screen Sizes

This section allows you to specify device sizes that you want to generate screens for. Please note that this is the pixel size of the viewport in the browser, not the resolution of the resulting image. In order to comply with Apple's image sizes, you may need to scale these images accordingly.

Options

width	The width of the viewport.
height	The height of the viewport.

Sample usage:

sizes:
  - width: 320
    height: 568
  - width: 375
    height: 667