Screenshoteer – Command-line website screenshots and mobile emulations(github.com)
github.com
Screenshoteer – Command-line website screenshots and mobile emulations
https://github.com/vladocar/screenshoteer
31 comments
The distinction here is that the links you've posted are from the browser console line, while the tool in question can take screenshots from the terminal/command line (sans browser, can be automated).
Firefox and Chrome, and most major browsers can indeed take screenshots from the browser _console_, but taking screenshots from the command line is a separate, interesting concept.
Firefox and Chrome, and most major browsers can indeed take screenshots from the browser _console_, but taking screenshots from the command line is a separate, interesting concept.
why don't just use chrome/chromium without puppeteer?
google-chrome --headless --screenshot http://site.com
It's a one line command.
google-chrome --headless --screenshot http://site.com
It's a one line command.
But then you wouldn't need JavaScript...
Very cool! I made something similar a while ago:
https://github.com/fabrik42/responsive_mockups
My version is less configurable but wraps the screenshots in some beautiful mockups :)
My version is less configurable but wraps the screenshots in some beautiful mockups :)
Cool, I was just looking for something like this. A useful feature would be the possibility to screenshot a specific element only instead of the whole page (using something like https://github.com/GoogleChrome/puppeteer/blob/master/docs/a... ). Also an option to set the ouput filename is a must for scripting !
I just pushed the version 1.0.2 to npm. Now you can do this:
screenshoteer --url https://news.ycombinator.com/item?id=18598672 --el ".fatitem"
screenshoteer --url https://news.ycombinator.com/item?id=18598672 --el ".fatitem"
I needed to crawl sitemaps, create snapshots in three device sizes (mobile, tablet and desktop) and compare my snapshots with their previous versions. I ended up creating this tool https://github.com/raminv80/webTimeMachine it is not perfect but does the job. I might continue improving it if others find it useful.
[deleted]
[deleted]
Nice small project. This uses a chrome-headless on the background to perform the screenshot, isn't it?
Also, you have included a .DS_Store file in your repository.
Also, you have included a .DS_Store file in your repository.
Yes, it uses puppeteer(headless chrome).
For the .DS_Store I totally forgot to put .gitignore :)
For the .DS_Store I totally forgot to put .gitignore :)
The version from NPM is 0.3.2 but the GitHub docs are for 1.0.1? Looks like the --url option doesn't (yet) exist on NPM.
The name is inspired by the "puppeteer" => screenshot + puppe-teer = screenshoteer
Adding a click-accept feature would be great, so it can automatically click GDPR notices, popup email subscribe boxes, etc.
If you need to do some "work" like closing banners or form filling before taking the screenshot,
use the kantu Selenium IDE: https://a9t9.com/kantu/docs/selenium-ide/capturescreenshot
Command line options: https://a9t9.com/kantu/docs#cmd
(... and it works in Chrome and Firefox.)
Command line options: https://a9t9.com/kantu/docs#cmd
(... and it works in Chrome and Firefox.)
Thanks!
Nice. I made something almost exactly like this using puppeteer as well except it took screenshots of all the pages of a site. It crawled first getting all site pages, then created a JSON config file that would be used to take screenshots with. I should really throw this up on GitHub as well.
Funnily enough, I called mine: Screenshotr
Funnily enough, I called mine: Screenshotr
I would really like to see this as well. We're looking to monitor a set of websites and all child pages (which change dynamically) to identify possible data leaks.
Please do. Yours sounds a bit more comprehensive than the current state of OP's.
I'll put it up once I get home from work and post it here (or maybe submit it as a new thread)
A similar thing I wrote one evening lol https://github.com/Weston-Boldt/webscrot
I like this. Your motto should be "How do I screenshot web?"
Read no further than 'npm'...
https://support.mozilla.org/en-US/kb/firefox-screenshots