Puppeteer: CLI based Website Screenshots
This is a straight forward Puppeteer based website screenshot generator.
How it works
We use Puppeteer to initially try and fetch the first nav > ul > li > a of a given domain.
For every qualifying navigation item we find, we push the title and href values into an array.
Then we simply iterate through that array, goto
that url and take both a default deview viewport screenshot as well as a full-page screenshot.
Installation & Configuration
- Git clone
https://github.com/ScoutsOut/bkd-puppeteer
- Run
npm i
- Create an
.env
file in the root of the project's directory- You'll also need to provide a few baseline variables as shown below (If the site has simple authentication, provide a username and password):
HOST=https://npr.com USER=yourUserName PASS=yourPassword DESTINATION=build-directory-of-choice
Where generated screenshots are generated
- Whichever directory you've dicated within
.evn
, the Puppeteer bot will create directories by page and device. - The file names have the following format:
Page name - Device name - Height - width.jpg
- Realworld example:
Contact Us-iPad-768x1024.fullscreen.jpg
- Realworld example:
###Available Scripts
npm run puppet
-
npm run puppet-dev
- only difference is the use of nodemon
#####That's pretty much it. I know. Nothing Earth shattering but clients find it useful because it's a real time-saver in UI Regression Testing.
#####Hopefully someone out there will find this helpful. I'm going to continue to extend this (mostly for my own personal development).
If anyone has suggestions...feel free to throw ideas out there :)
created by BKD Digital Inc.