Skip to content

A tool to make quick screenshots for multiple mobile devices of your web app in a couple of minutes.

Notifications You must be signed in to change notification settings

eugeniosegala/snap-this

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

A tool to make quick screenshots for multiple mobile devices of your web app in a couple of minutes.

Topics

Resources

Stars

Watchers

Forks

Packages