72 lines
1.9 KiB
Markdown
72 lines
1.9 KiB
Markdown
# Phase 3: Screenshot Capture
|
|
|
|
## Overview
|
|
|
|
Execute the Playwright screenshot command with appropriate options for your use case.
|
|
|
|
## Basic Command
|
|
|
|
```bash
|
|
playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
|
|
```
|
|
|
|
## Command Options
|
|
|
|
| Option | Purpose | Example |
|
|
|--------|---------|---------|
|
|
| `--full-page` | Capture entire document | Required for most diagrams |
|
|
| `--viewport-size=WxH` | Set initial viewport | `--viewport-size=1920x1080` |
|
|
| `--wait-for-timeout=ms` | Wait before capture | `--wait-for-timeout=1000` |
|
|
| `--device=name` | Emulate device | `--device="iPhone 12"` |
|
|
| `--color-scheme=mode` | Light/dark mode | `--color-scheme=dark` |
|
|
|
|
## Common Patterns
|
|
|
|
### Academic Diagrams (Most Common)
|
|
|
|
```bash
|
|
# Full page capture - lets content determine size
|
|
playwright screenshot --full-page "file://$(pwd)/docs/architecture.html" docs/architecture.png
|
|
```
|
|
|
|
### Fixed Width Output
|
|
|
|
```bash
|
|
# Set specific width, full page height
|
|
playwright screenshot --full-page --viewport-size=1200x800 "file://$(pwd)/diagram.html" output.png
|
|
```
|
|
|
|
### Wait for Dynamic Content
|
|
|
|
```bash
|
|
# Wait 2 seconds for animations/rendering
|
|
playwright screenshot --full-page --wait-for-timeout=2000 "file://$(pwd)/diagram.html" output.png
|
|
```
|
|
|
|
### Dark Mode Diagram
|
|
|
|
```bash
|
|
playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" output-dark.png
|
|
```
|
|
|
|
## Batch Conversion
|
|
|
|
```bash
|
|
# Convert all HTML files in docs/ to PNG
|
|
for f in docs/*.html; do
|
|
output="${f%.html}.png"
|
|
playwright screenshot --full-page "file://$(pwd)/$f" "$output"
|
|
echo "Converted: $f -> $output"
|
|
done
|
|
```
|
|
|
|
## Output Location
|
|
|
|
- **Same directory**: Just use filename (`output.png`)
|
|
- **Different directory**: Use path (`docs/images/output.png`)
|
|
- **Ensure directory exists**: `mkdir -p docs/images` before running
|
|
|
|
## Next Phase
|
|
|
|
Proceed to **Phase 4: Output Verification** to validate the result.
|