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
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 git@github.com: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.
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