• Stars
    star
    1,675
  • Rank 27,886 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Make website screenshots and mobile emulations from the command line.

Screenshoteer

Makes web screenshots and mobile emulations from the command line.


Tool based on puppeteer.

Installation

npm i -g screenshoteer

You can use screenshoteer like this:

screenshoteer  --url https://www.example.com

or .html localy copy the url path from the browser

screenshoteer --url file:///Users/../index.html
screenshoteer --url file:///C:/Users/../Random-HTML-file.html

And with the help of puppeteer(Headless Chrome) it will generate screenshot of the entire web page.

Parameters:

-h help
--url web page url
--emulate - emulate web device example: --emulate "iPhone 6"
--fullpage - can be true or false. It will take screenshot of entire web page if is true. True is the default parameter.
--pdf - generate additional pdf
--w - width of the Web Page in px
--h - height of the Web Page in px
--waitfor - wait time for the page load in milliseconds
--waitforselector - wait for the selector to appear in page --el - css selector document.querySelector
--auth - basic http authentication
--no - exclude "image", "stylesheet", "script", "font"
--click - example: ".selector>a" excellent way to close popups or to click some buttons on the page.
--file - output file name (optional, otherwise based on page title and timestamp)
--theme - switch to dark or light color theme
--vd - Emulate vision deficiency 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia', 'blurredVision', and 'none'

Example:

screenshoteer  --url https://news.ycombinator.com --fullpage false

screenshoteer  --url https://www.reddit.com/r/nodejs --emulate "iPhone 7"

screenshoteer  --url https://www.nytimes.com  --emulate "Nexus 4"

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false

screenshoteer --url https://lobste.rs --pdf

screenshoteer --url https://lobste.rs --w 500

screenshoteer --url  https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

screenshoteer --url  https://site.com --auth "username;password"

screenshoteer --url https://www.nytimes.com --no "image"

screenshoteer --url https://www.nytimes.com --no "script"

screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button"

screenshoteer --url file:///Users/../index.html

screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png

screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark

screenshoteer --url https://news.ycombinator.com --vd blurredVision

List of of supported mobile devices: https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js

License

This project is licensed under the MIT License

More Repositories

1

Basic.css

Basic.css - Classless CSS Starter File
HTML
679
star
2

nanoJS

Minimal standalone JS library for DOM manipulation
JavaScript
653
star
3

Hartija---CSS-Print-Framework

Universal CSS for web printing
HTML
529
star
4

CSS-Micro-Reset

Minimal barebone CSS Reset
CSS
357
star
5

SMART-CSS-GRID

SMART CSS GRID - CSS Framework
HTML
307
star
6

femtoJS

femtoJS - Really small JavaScript (ES6) library for DOM manipulation.
JavaScript
141
star
7

Box-CSS-Framework

Box - CSS Framework
HTML
138
star
8

Minimal-Notes

Minimal Notes web app build with Vue.js
HTML
127
star
9

infinity-css-grid

Fluid Flex Solution for making infinite grid columns.
HTML
120
star
10

flexy

Flexy is minimal CSS framework made with Flex
HTML
115
star
11

1-line-CSS-Framework

One Line CSS Framework
HTML
69
star
12

picoCSS

picoCSS - really small JavaScript Framework
HTML
67
star
13

60gs

60GS - 60 Columns Grid System based on CSS Grid Layout
HTML
65
star
14

ramd.js

ramd.js JavaScript library for making web applications.
HTML
63
star
15

Katana

Katana is CSS Layout System made with Flexbox
HTML
58
star
16

keywordsextract

keywords-extract - Command line tool extract keywords from any web page.
JavaScript
55
star
17

CSS-Mini-Reset

CSS Mini Reset
CSS
52
star
18

AutoObjectDocumentation

Auto Object Documentation - JavaScript
JavaScript
51
star
19

Flex-One

1 CSS Class Layout System made with Flex
HTML
49
star
20

Basic-CSS-Typography-Reset

Essential CSS Typography Set
HTML
47
star
21

Scribble-Font

Scribble Font for Prototyping & Wireframing
HTML
47
star
22

PDFSave

Convert websites into readable PDFs
JavaScript
46
star
23

CSS-Mobile-Reset

36
star
24

boilerplate-readme-template

Boilerplate README.md Template for GitHub or GitLab use.
36
star
25

floaty

CSS Float Based Layout System
HTML
35
star
26

HTML-Lorem-Ipsum-Crash-Test

HTML Lorem Ipsum Crash Test for testing your CSS
HTML
35
star
27

HTML5-Mini-Template

HTML5 Mini Template
35
star
28

o---JS-Library-for-Object-Manipulation

o - JS Library for Object Manipulation
JavaScript
31
star
29

CSS3-Fancy-Box

CSS3 Fancy Box
HTML
27
star
30

Two-Lines-CSS-Framework

Two Lines CSS Framework
17
star
31

Foxy-CSS-Framework

Foxy CSS Framework
16
star
32

CSS3-Chat-Bubble

CSS3 Chat Bubble
9
star
33

Font-Pairing-Glyph-Comparison-Tool

Web Template for Glyph Comparison
HTML
7
star
34

Simple-Button

Simple CSS Button - Starter Kit for CSS Buttons
HTML
4
star
35

Spacestone

CLI for tesseract.js
JavaScript
2
star
36

emastic---css-framework--beta3--0.8

Emastic is small, fluid, em based CSS Framework
2
star
37

npm-I-love-you-too

npm love us. we love it back.
2
star
38

foam-template

CSS
1
star
39

Pangram-Proveruvac-Makedonski

Панграм проверувач
HTML
1
star
40

font-pairing

Font Pairing
HTML
1
star
41

Child-Selector-System-CSS_Framework

Child Selector System is experimental CSS Framework that use child selectors for making multiple simple (column) grid.
HTML
1
star