Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/WebDevStudios/puppeteer-screenshots
Take automated screenshots of webpages at multiple viewports.
https://github.com/WebDevStudios/puppeteer-screenshots
automated-screenshots puppeteer-screenshots screenshots
Last synced: 3 months ago
JSON representation
Take automated screenshots of webpages at multiple viewports.
- Host: GitHub
- URL: https://github.com/WebDevStudios/puppeteer-screenshots
- Owner: WebDevStudios
- License: gpl-2.0
- Created: 2020-11-30T15:30:34.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T11:57:29.000Z (over 1 year ago)
- Last Synced: 2024-04-03T14:32:15.505Z (7 months ago)
- Topics: automated-screenshots, puppeteer-screenshots, screenshots
- Language: JavaScript
- Homepage:
- Size: 61.7 MB
- Stars: 23
- Watchers: 2
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Puppeteer Screenshots
A simple script for taking automated screenshots of webpages at multiple viewports.
[](https://webdevstudios.com/contact/)
---
## Table of Contents
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Contributing](#contributing)
---
## Prerequisites
- [Node](https://nodejs.org/en/)
---
## Install
Clone the repo:
```bash
git clone [email protected]:WebDevStudios/puppeteer-screenshots.git
```
Change directories:
```bash
cd puppeteer-screenshots
```
Install the dependencies:
```bash
npm i
```
---
## Usage
1. Open `src/config.js`
2. Add the name and url of webpages you want Puppeteer to screenshot:
```js
// 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:
```bash
npm start
```
Individual screenshots (and a `.zip`) will appear in the `/screenshots` directory.
```text
├── 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](https://github.com/WebDevStudios/puppeteer-screenshots/issues) and [Pull Requests](https://github.com/WebDevStudios/puppeteer-screenshots/pulls). Stay safe 🍻