This is a straight forward Puppeteer based website screenshot generator.

We use Puppeteer to identify and capture any given website's primary navigation links (urls): nav > ul > li > a.

For every qualified navigation item, we capture and add the title and href values into an array. Then we simply iterate through that array, use Puppeteer's goto method to capture both default viewport and full-page screenshots.

• npm i bkd-puppeteer

• Create an .env file in the root of the project's directory

  • Add 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
  

• Screenshots are generated into the directory you've indicated in .env
• Filenames follow this format: Page name - Device name - Height - width.jpg
  • Realworld example: Contact-Us-iPad-768x1024.fullscreen.jpg

• npm run puppet
• npm run puppet-dev - only difference is the use of nodemon

If anyone has suggestions...feel free to throw ideas out there :)

created by BKD Digital Inc.