The most aptly-named way to take screenshots of pages with Electron.
⚠️ This is alpha software, no matter which tool you are using always check the screenshots yourself.
Requires Node 6+. From the command line, run
npm install -g screenshotron
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 screenshotroningscreenshotron --delay 3000 example.com bananas.com✔ Generated 2 screenshots from 2 urls and 1 size
Install the project with:
git clone firstname.lastname@example.org:springload/screenshotron.gitcd screenshotronnvm installnpm installnpm 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 mastergit push --tagsnpm 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?).
- 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
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