├── .gitignore ├── LICENSE ├── README.md ├── carbon-shot.png ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # General 2 | .DS_Store 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # TypeScript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # next.js build output 64 | .next 65 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Vladimir Carrer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Screenshoteer

2 | 3 |

Makes web screenshots and mobile emulations from the command line.

4 | 5 |

6 |
7 | 8 |

Tool based on puppeteer.

9 | 10 |

Installation

11 | 12 | ```shell 13 | npm i -g screenshoteer 14 | ``` 15 |

You can use screenshoteer like this:

16 | 17 | ```shell 18 | screenshoteer --url https://www.example.com 19 | 20 | or .html localy copy the url path from the browser 21 | 22 | screenshoteer --url file:///Users/../index.html 23 | screenshoteer --url file:///C:/Users/../Random-HTML-file.html 24 | ``` 25 | 26 |

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

27 | 28 |

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

49 | 50 |

Example:

51 | 52 | ```shell 53 | screenshoteer --url https://news.ycombinator.com --fullpage false 54 | 55 | screenshoteer --url https://www.reddit.com/r/nodejs --emulate "iPhone 7" 56 | 57 | screenshoteer --url https://www.nytimes.com --emulate "Nexus 4" 58 | 59 | screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false 60 | 61 | screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false 62 | 63 | screenshoteer --url https://lobste.rs --pdf 64 | 65 | screenshoteer --url https://lobste.rs --w 500 66 | 67 | screenshoteer --url https://news.ycombinator.com/item?id=18598672 --el ".fatitem" 68 | 69 | screenshoteer --url https://site.com --auth "username;password" 70 | 71 | screenshoteer --url https://www.nytimes.com --no "image" 72 | 73 | screenshoteer --url https://www.nytimes.com --no "script" 74 | 75 | screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button" 76 | 77 | screenshoteer --url file:///Users/../index.html 78 | 79 | screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png 80 | 81 | screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark 82 | 83 | screenshoteer --url https://news.ycombinator.com --vd blurredVision 84 | ``` 85 |

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

87 | 88 |

License

89 | 90 | This project is licensed under the MIT License 91 | -------------------------------------------------------------------------------- /carbon-shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/screenshoteer/efcefa7e85f003004aecdb29fb059c2ed3cdf342/carbon-shot.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const puppeteer = require('puppeteer'); 4 | const devices = require('puppeteer/DeviceDescriptors'); 5 | const program = require('commander'); 6 | 7 | program 8 | .option('--url, [url]', 'The url') 9 | .option('--emulate, [emulate]', 'emulate device') 10 | .option('--fullpage, [fullpage]', 'Full Page') 11 | .option('--pdf, [pdf]', 'Generate PDF') 12 | .option('--w, [w]', 'width') 13 | .option('--h, [h]', 'height') 14 | .option('--waitfor, [waitfor]', 'Wait time in milliseconds') 15 | .option('--waitforselector, [waitforselector]', 'Wait for the selector to appear in page') 16 | .option('--el, [el]', 'element css selector') 17 | .option('--auth, [auth]', 'Basic HTTP authentication') 18 | .option('--no, [no]', 'Exclude') 19 | .option('--click, [click]', 'Click') 20 | .option('--file, [file]', 'Output file') 21 | .option('--theme, [theme]', 'Color Theme light or dark') 22 | .option('--vd, [vd]', 'Emulate vision deficiency') 23 | .parse(process.argv); 24 | 25 | if (!program.url) { 26 | console.log('Please add --url parameter.\n' + 27 | 'Something like this: $ screenshoteer --url http://www.example.com'); 28 | process.exit(); 29 | } 30 | 31 | !program.fullpage ? program.fullPage = true : program.fullPage = JSON.parse(program.fullpage); 32 | 33 | console.log(program.url); 34 | console.log(program.fullPage); 35 | 36 | 37 | const deviceName = puppeteer.devices[program.emulate]; 38 | 39 | 40 | (async () => { 41 | try { 42 | await execute(); 43 | } catch(e) { 44 | console.error(e); 45 | process.exit(1); 46 | } 47 | 48 | async function execute() { 49 | const browser = await puppeteer.launch(); 50 | const page = await browser.newPage(); 51 | if (program.no) { 52 | await page.setRequestInterception(true); 53 | page.on('request', request => { 54 | if (request.resourceType() === program.no) 55 | request.abort(); 56 | else 57 | request.continue(); 58 | }); 59 | } 60 | const timestamp = new Date().getTime(); 61 | if (program.w || program.h) { 62 | const newWidth = !program.w?600:program.w 63 | const newHeight = !program.h?'0':program.h 64 | if (program.h && !program.fullpage) program.fullPage = false; 65 | await page.setViewport({width: Number(newWidth), height: Number(newHeight)}) 66 | } 67 | if (program.theme) { 68 | await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: program.theme }]); 69 | } 70 | if (program.vd) { 71 | await page.emulateVisionDeficiency(program.vd); 72 | } 73 | if (program.emulate) 74 | await page.emulate(deviceName); 75 | else 76 | program.emulate = ''; 77 | 78 | if (program.auth) { 79 | const [username, password] = program.auth.split(';'); 80 | await page.authenticate({ username, password }); 81 | } 82 | await page.goto(program.url); 83 | const title = (await page.title()).replace(/[/\\?%*:|"<>]/g, '-'); 84 | if (program.waitfor) await page.waitFor(Number(program.waitfor)); 85 | if (program.waitforselector) await page.waitForSelector(program.waitforselector); 86 | if (program.click) await page.click(program.click); 87 | const file = program.file ? program.file : `${title} ${program.emulate} ${program.el} ${timestamp}.png`; 88 | if (program.el) { 89 | const el = await page.$(program.el); 90 | await el.screenshot({path: file}); 91 | } else { 92 | await page.screenshot({path: file, fullPage: program.fullPage}); 93 | } 94 | await page.emulateMedia('screen'); 95 | if (program.pdf) await page.pdf({path: `${title} ${program.emulate} ${timestamp}.pdf`}); 96 | console.log(title); 97 | await browser.close(); 98 | } 99 | })() 100 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "screenshoteer", 3 | "version": "1.1.1", 4 | "description": "Make screenshots and device emulations form your terminal", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "bin": { 10 | "screenshoteer": "index.js" 11 | }, 12 | "dependencies": { 13 | "commander": "^2.19.0", 14 | "puppeteer": "^4.00.0" 15 | }, 16 | "keywords": [ 17 | "screenshots", 18 | "emulations", 19 | "mobile" 20 | ], 21 | "author": "Vladimir Carrer (http://www.vcarrer.com)", 22 | "license": "MIT", 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/vladocar/screenshoteer.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/vladocar/screenshoteer/issues" 29 | }, 30 | "homepage": "https://github.com/vladocar/screenshoteer#readme" 31 | } 32 | --------------------------------------------------------------------------------