A docker compose configuration that uses headless chrome with puppeteer to generate full page screenshots for a given set of urls and devices.
An effective DIY solution to batch screenshot for proofing & testing devices.
I use in combination with Invision.
Of course, it is useful for several different things.
Proofing Scenario
-
- Edit devices.js for each desired device to test and add desired test urls to url.js
-
- Create Invision prototype for each of those desired device configurations
-
- Run script*
-
- Upload device screenshot device folder to Invison prototype
Simply repeat steps 3-4 for each set of revisions
*The script is creating a puppeteer instance and goes through each configured device to update the viewport. For each of these configurations the url list will be used to create full page screenshots, which will be stored in the screenshots directory that will be created/updated under app each time the script is ran.
Install Docker and make sure it is up and running before moving ahead.
Should be able to access docker commands in cli.
A preconfigured list of devices is available in the applications devices.js.
The list was extracted from the Chromium repository: Chromium Emulated Device Configurations Json
In the urls.js is the list of pages that will be requested to create screenshots.
- To easily collect a list of urls- use this tool SEO Chat Website Crawler, download the xls file, then add desired urls to urls.js
- See puppeteer docs for more options on device viewports, configuration, loading options, etc.
This is required only once in order to create the Docker image.
docker-compose build
Must be run each time to generate all screenshots for the devices and urls. The container will be exited once the job is done.
docker-compose run puppeteer