Screenshoteer – Command-line website screenshots and mobile emulations

based2 7 years ago |

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

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

gpantazes 7 years ago | |

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 7 years ago |

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

google-chrome --headless --screenshot http://site.com

It's a one line command.

_eht 7 years ago | |

But then you wouldn't need JavaScript...

fabrik42 7 years ago |

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

ajnin 7 years ago |

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 !

vladocar 7 years ago | |

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"

raminv 7 years ago |

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.

leppr 7 years ago |

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 7 years ago | |

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

tronko 7 years ago |

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 7 years ago | |

Yes, it uses puppeteer(headless chrome).

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

astrodust 7 years ago | | |

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 7 years ago | | |

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

astrodust 7 years ago | | |

Oh. Well, that would explain.

vladocar 7 years ago | | |

The name is inspired by the "puppeteer" => screenshot + puppe-teer = screenshoteer

vladocar 7 years ago | | |

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

astrodust 7 years ago | | |

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

rgrieselhuber 7 years ago |

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

eastendguy 7 years ago | |

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

rgrieselhuber 7 years ago | | |

Thanks!

flanbiscuit 7 years ago |

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

bberenberg 7 years ago | |

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.

blorenz 7 years ago | |

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

flanbiscuit 7 years ago | | |

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

beepboopah 7 years ago |

A similar thing I wrote one evening lol https://github.com/Weston-Boldt/webscrot

philipov 7 years ago |

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

mbrumlow 7 years ago |

Read no further than 'npm'...