# Playwright Screen Recording

> Record browser test videos with Playwright for PR review and bug fix verification Use when this capability is needed.

- Skill: `tomevault-io/playwright-screen-recording` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/playwright-screen-recording`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/playwright-screen-recording/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/playwright-screen-recording

---


# Playwright Screen Recording for Test Verification

Use Playwright's video recording to capture headless browser operations as .webm videos for PR review or bug fix verification.

## Core Usage

```python
from playwright.sync_api import sync_playwright
import tempfile
from pathlib import Path

video_dir = Path(tempfile.mkdtemp())

with sync_playwright() as pw:
    browser = pw.chromium.launch(headless=True)
    context = browser.new_context(
        viewport={"width": 1400, "height": 900},
        record_video_dir=str(video_dir),
        record_video_size={"width": 1400, "height": 900},
    )
    page = context.new_page()
    page.goto(f"file:///path/to/test.html")

    # ... perform test actions, add pauses for readability ...
    page.wait_for_timeout(800)  # pause so viewers can see the current state

    page.close()
    context.close()  # video is finalized after context.close()
    browser.close()

# Retrieve the recorded video
videos = list(video_dir.glob("*.webm"))
if videos:
    videos[0].rename("demo.webm")
```

## Use Cases

- **Bug fix verification**: record before/after comparisons showing button state changes, UI behavior differences
- **PR Review**: attach .webm video so reviewers can visually understand the change
- **Regression test evidence**: record critical interaction paths as visual proof of passing tests

## Recording Tips

### Add pauses between actions

```python
page.click(".some-button")
page.wait_for_timeout(800)   # let viewers see the click effect

page.keyboard.press("ArrowRight")
page.wait_for_timeout(600)   # let viewers see the navigation result
```

### Combine assertions with terminal logging

```python
state = get_nav_state(page)
print(f"[1] Title: {state['title']}")
print(f"    prev disabled: {state['prevDisabled']}  (expected: True)")
assert state["prevDisabled"] is True
print("    PASS")
```

Terminal output paired with the recorded video provides dual verification.

### Prefer real data

Use existing real trace data from the project rather than synthetic data for more convincing demos:

```python
# Build test HTML from a real trace file
records = []
with open(".traces/trace_xxx.jsonl") as f:
    for line in f:
        # Escape </script> to prevent breaking the HTML script block
        records.append(line.strip().replace("</script>", '</scr" + "ipt>'))
```

## Notes

- Video format is `.webm` (VP8 codec), supported by most players and browsers
- Each `page` produces a separate video file
- `record_video_size` controls video resolution — keep it consistent with `viewport`
- Recording works in headless mode, no display required
- Video files are typically a few hundred KB, suitable for attaching to PRs or chat

---
> Source: [liaohch3/claude-tap](https://github.com/liaohch3/claude-tap) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-07-03 -->