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