
Screenshoteer – Command-line website screenshots and mobile emulations - vladocar
https://github.com/vladocar/screenshoteer
======
based2
[https://blog.nightly.mozilla.org/2018/08/23/screenshots-
from...](https://blog.nightly.mozilla.org/2018/08/23/screenshots-from-the-
console/)

[https://support.mozilla.org/en-US/kb/firefox-
screenshots](https://support.mozilla.org/en-US/kb/firefox-screenshots)

~~~
gpantazes
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.

------
atum47
why don't just use chrome/chromium without puppeteer?

google-chrome --headless --screenshot [http://site.com](http://site.com)

It's a one line command.

~~~
_eht
But then you wouldn't need JavaScript...

------
fabrik42
Very cool! I made something similar a while ago:
[https://github.com/fabrik42/responsive_mockups](https://github.com/fabrik42/responsive_mockups)

My version is less configurable but wraps the screenshots in some beautiful
mockups :)

------
ajnin
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...](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandlescreenshotoptions)
). Also an option to set the ouput filename is a must for scripting !

~~~
vladocar
I just pushed the version 1.0.2 to npm. Now you can do this:

screenshoteer --url
[https://news.ycombinator.com/item?id=18598672](https://news.ycombinator.com/item?id=18598672)
\--el ".fatitem"

------
raminv
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](https://github.com/raminv80/webTimeMachine)
it is not perfect but does the job. I might continue improving it if others
find it useful.

------
leppr
Maybe the interface could be simplified: you're always going to give it URLs
so you can allow those as non-option arguments (also can you pass it multiple
URLs?).

~~~
ohitsdom
Seconding this, a very good suggestion to simplify the API.

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

~~~
vladocar
Yes, it uses puppeteer(headless chrome).

For the .DS_Store I totally forgot to put .gitignore :)

~~~
astrodust
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.

~~~
Dragory
The one that's 0.3.2 is called "screenshooter", while this tool is called
"screenshoteer".

~~~
astrodust
Oh. Well, that would explain.

------
rgrieselhuber
Adding a click-accept feature would be great, so it can automatically click
GDPR notices, popup email subscribe boxes, etc.

~~~
eastendguy
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](https://a9t9.com/kantu/docs/selenium-
ide/capturescreenshot)

Command line options:
[https://a9t9.com/kantu/docs#cmd](https://a9t9.com/kantu/docs#cmd)

(... and it works in Chrome _and_ Firefox.)

~~~
rgrieselhuber
Thanks!

------
flanbiscuit
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

~~~
blorenz
Please do. Yours sounds a bit more comprehensive than the current state of
OP's.

~~~
flanbiscuit
I'll put it up once I get home from work and post it here (or maybe submit it
as a new thread)

------
beepboopah
A similar thing I wrote one evening lol [https://github.com/Weston-
Boldt/webscrot](https://github.com/Weston-Boldt/webscrot)

------
philipov
I like this. Your motto should be "How do I screenshot web?"

------
mbrumlow
Read no further than 'npm'...

