Snap-this NPM | npm.io

snap-this

Snap This is a tool based on Puppeteer and built in Node JS that allows you to make screenshots automatically for different devices and different resolutions in a couple of minutes on Chrome!

Simulating devices
Local Storage Support
Await important elements before screenshots
Dynamic showcase
Wait for all network calls (Pending XHR Puppeteer)
Cookies support
Customizable devices list

Quick start: WEBSITE=https://en.wikipedia.org/ npx snap-this (with this command you don't need to install the package)

Install: npm i snap-this

Commands:

WEBSITE=https://en.wikipedia.org/ npx snap-this (npx will resolve the path to node_modules for you or just it execute everything without downloading the package)

WEBSITE=https://en.wikipedia.org/ snap-this (basic command for advanced IDE's)

WEBSITE=https://thameslink.stage.otrl.io/ ./node_modules/.bin/snap-this (resolving the node_modules path to the bin file manually)

Options:

WEBSITE=https://en.wikipedia.org/ (define the app endpoint)
SELECTOR=".important-element" (wait for an important item before the snap)
LOCAL_STORAGE="local-storage.js" (set path for local storage information)

Local storage template

Full command example: WEBSITE=https://en.wikipedia.org/ SELECTOR=".important-element" LOCAL_STORAGE="local-storage.js" snap-this

This package will create a folder at root level of your app containing a .png image for each device. It's also available an index.html file with the entire list.