A simple script for taking automated screenshots of webpages at multiple viewports.
Clone the repo:
git clone [email protected]:WebDevStudios/puppeteer-screenshots.git
Change directories:
cd puppeteer-screenshots
Install the dependencies:
npm i
- Open
src/config.js
- 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/'
}
]
- 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
WebDevStudios welcomes contributions via Issues and Pull Requests. Stay safe 🍻