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!

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

Usage

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.

The are 71 devices/resolutions available inside the package (thanks to Puppeteer).