screenshotron

screenshotron

The most aptly-named way to take screenshots of pages with Electron.

:warning: This is alpha software, no matter which tool you are using always check the screenshots yourself.

Installation

Requires Node 6+. From the command line, run

npm install -g screenshotron

Usage

From the command line, run

screenshotron example.com
✔ Generated 1 screenshot from 1 url and 1 size
# With a specific time to wait for before screenshotroning
screenshotron --delay 3000 example.com bananas.com
✔ Generated 2 screenshots from 2 urls and 1 size

Contributing

You first need to clone the project on your computer, and to install Node. This project uses nvm to execute a specific node version.

Install the project with:

git clone [e-mail]:springload/screenshotron.git
cd screenshotron
nvm install
npm install
npm install -g eslint babel-eslint eslint-config-airbnb
./.githooks/deploy

To run the tests:

npm run test

To release a new version:

npm version minor -m "Release %s"
git push origin master
git push --tags
npm publish

Automated screenshot taking

To take screenshots of web pages, you need to display the pages inside a browser. To do reliably and at large scales, you need the navigation to the site and dimensioning of the viewport to be automated. You need an automated (headless?) browser.

The best automated browsers are:

• PhantomJS (WebKit, engine of Safari, headless).
• SlimerJS (Gecko, engine of Firefox, not truly headless yet).
• Electron (Chromium/Blink, engine of Chrome, not truly headless?).

I have had issues with the screenshots taken by Phantom (via pageres, via screenshot-stream), and SlimerJS (homemade), so it is now time to try Electron.

• Nightmare screenshots implementation https://github.com/segmentio/nightmare/blob/master/lib/runner.js#L416
• Electron screenshot https://github.com/electron/electron/blob/master/docs/api/browser-window.md#wincapturepagerect-callback, https://gist.github.com/twolfson/0d374d9d7f26eefe7d38
• https://github.com/FWeinb/electron-screenshot-app
• https://github.com/FWeinb/electron-screenshot-service
• https://github.com/JamesKyburz/electron-screenshot
• https://github.com/victorferraz/break-shot

Code originally taken from https://github.com/thibaudcolas/is-js-error, and https://github.com/sindresorhus/pageres/

Here are common pitfalls of automated screenshot taking:

• Web fonts support and loading
• HTTPS or mixed-source support
• Images loading
• Animations that execute on page load (carousels)
• Modals, overlays, and interstitials
• EU-law cookie messages

To research: https://github.com/NullCrayfish/CookiesOK

Changelog

[0.3.0] - 2017-01-27

Added

• Introduce manual mode to allow interaction with the page before screenshotting