🎯 What You Will Learn
Capture pages and elements, choose useful viewport sizes, export PDFs, and organize browser evidence for debugging.
- Capture viewport and element screenshots
- Set repeatable viewport dimensions
- Export a browser page to PDF
- Organize evidence so another developer can reproduce the state
Capture Evidence with a Question
A screenshot is useful when it answers a specific question: what was visible, which control overlapped, whether the mobile menu opened, or what the browser showed before failure.
Prepare an Artifact Folder
Run the workflow from a dedicated output folder so snapshots and captures stay together.
mkdir -p output/playwright/visual-evidence
cd output/playwright/visual-evidence
"$PWCLI" -s=visual open https://playwright.dev --headedSet a Repeatable Viewport
Resize before capturing. A known viewport makes side-by-side comparisons more meaningful.
"$PWCLI" -s=visual resize 1280 720
"$PWCLI" -s=visual snapshotCapture the Visible Viewport
The screenshot command without a target captures the current viewport and reports the saved path.
"$PWCLI" -s=visual screenshotScreenshot saved to .playwright-cli/page-<timestamp>.png
Capture One Element
Snapshot first, identify the current element ref, then pass it to screenshot. This removes unrelated page chrome from the evidence.
"$PWCLI" -s=visual snapshot
"$PWCLI" -s=visual screenshot eARTICLECapture Desktop and Mobile States
Resize, let the layout settle, snapshot, and capture each breakpoint. Label the resulting files in your issue or test report.
"$PWCLI" -s=visual resize 390 844
"$PWCLI" -s=visual snapshot
"$PWCLI" -s=visual screenshot
"$PWCLI" -s=visual resize 1440 900
"$PWCLI" -s=visual snapshot
"$PWCLI" -s=visual screenshotExport the Page as PDF
PDF export is useful for printable documentation and reviewing long pages outside the browser. The CLI saves the generated document and returns its path.
"$PWCLI" -s=visual pdfPackage Evidence for Another Developer
A capture without context is easy to misread. Pair it with the URL, viewport, exact action, expected result, actual result, console output, and trace when applicable.
| Include | Example |
|---|---|
| URL | The exact page and query string |
| Viewport | 390 × 844 |
| Action | Open menu, choose Account |
| Expected | Account panel is visible |
| Actual | Panel is hidden behind the header |
Visual regression: For automated pixel comparisons, use Playwright Test screenshot assertions rather than manually comparing CLI screenshots.
Recap
- Choose a specific question before capturing evidence.
- Record the viewport and active URL.
- Use element screenshots to isolate the subject.
- Pair images and PDFs with reproduction context.
Checkpoint: You have completed the workflow and have a repeatable reference for your next Playwright project.