Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nocturnalbeast/playwright-screenshot
A tool to take screenshots of webpages at multiple viewports using Playwright.
https://github.com/nocturnalbeast/playwright-screenshot
playwright screenshot screenshots
Last synced: 15 days ago
JSON representation
A tool to take screenshots of webpages at multiple viewports using Playwright.
- Host: GitHub
- URL: https://github.com/nocturnalbeast/playwright-screenshot
- Owner: nocturnalbeast
- Created: 2024-11-20T09:29:02.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-20T11:55:16.000Z (3 months ago)
- Last Synced: 2024-11-20T12:45:31.844Z (3 months ago)
- Topics: playwright, screenshot, screenshots
- Language: JavaScript
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# playwright-screenshot
A command-line tool to capture screenshots of web pages at multiple viewport sizes using Playwright.
## Installation
1. Clone this repository
2. Install dependencies:
```bash
npm install
```
3. Install browser dependencies:
```bash
npm run install-browsers
```
## Usage
```bash
node index.js --url [options]
```
### Options:
- `--url, -u`: URL of the webpage to capture (required)
- `--output, -o`: Output directory for screenshots/PDFs (default: "screenshots")
- `--dark, -d`: Enable dark theme for captures (default: false)
- `--browser, -b`: Browser to use (chromium, firefox, or webkit) (default: "chromium")
- `--zoom, -z`: Zoom level for the page (e.g., 1.5 for 150% zoom) (default: 1.0)
- `--delay`: Delay in milliseconds before taking each capture (default: 0)
- `--config, -c`: Path to viewport configuration file (required)
- `--pdf, -p`: Additionally export as PDF (only works with Chromium) (default: false)
- `--help`: Show help information
### Example:
```bash
node index.js --url https://example.com --output captures --browser firefox --dark --zoom 1.2 --delay 1000 --config viewports.json --pdf
```
## Configuration File Format
Create a JSON file (e.g., `viewports.json`) with your viewport configurations:
```json
{
"viewports": [
{
"name": "mobile",
"width": 375,
"height": 667
},
{
"name": "tablet",
"width": 768,
"height": 1024
},
{
"name": "desktop",
"width": 1920,
"height": 1080
}
]
}
```
## Output
### Screenshots
Screenshots are saved in the specified output directory with filenames following the pattern:
`{viewport-name}-{theme}.png` (e.g., `mobile-light.png`, `desktop-dark.png`)
### PDFs
When using the `--pdf` option (Chromium only), a single PDF is generated in Letter format (8.5" x 11") with the filename following the pattern:
`output-{theme}.pdf` (e.g., `output-light.pdf`, `output-dark.pdf`)