Screenshoteer – Command-line website screenshots and mobile emulations | Hacker News Reader

Screenshoteer – Command-line website screenshots and mobile emulations

github.com

96 pointsvladocar28 comments

https://blog.nightly.mozilla.org/2018/08/23/screenshots-from...

https://support.mozilla.org/en-US/kb/firefox-screenshots

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.

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

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

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"

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.

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

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

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.

Yes, it uses puppeteer(headless chrome).

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.

That is super strange.. I never inserted 0.3.2. The current version is 1.0.1

There's another NPM package with an almost but not quite similar name to yours.

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

Oh. Well, that would explain.

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

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

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)

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.

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

Reply on news.ycombinator.com