Puppeteer Screenshots

A simple script for taking automated screenshots of webpages at multiple viewports.

Table of Contents

• Prerequisites
• Install
• Usage
• Contributing

Prerequisites

• Node

Install

Clone the repo:

git clone [email protected]:WebDevStudios/puppeteer-screenshots.git

Change directories:

cd puppeteer-screenshots

Install the dependencies:

npm i

Usage

1. Open src/config.js
2. Add the name and url of webpages you want Puppeteer to screenshot:

// src/config.js
module.exports = [
  {
    name: 'homepage',
    url: 'https://webdevstudios.com/'
  },
  {
    name: 'blog',
    url: 'https://webdevstudios.com/blog/'
  },
  {
    name: 'contact',
    url: 'https://webdevstudios.com/contact/'
  }
]

3. Run the script:

npm start

Individual screenshots (and a .zip) will appear in the /screenshots directory.

├── screenshots
│   ├── desktop
│   │   ├── blog.png
│   │   ├── contact.png
│   │   └── homepage.png
│   ├── mobile
│   │   ├── blog.png
│   │   ├── contact.png
│   │   └── homepage.png
│   └── tablet
│       ├── blog.png
│       ├── contact.png
│       └── homepage.png
├── screenshots.zip

Contributing

WebDevStudios welcomes contributions via Issues and Pull Requests. Stay safe 🍻