Agent Skills › liaohch3/claude-tap › playwright-screen-recording

playwright-screen-recording

GitHub

基于Playwright录制浏览器测试视频，用于PR审查和Bug修复验证。支持无头模式生成.webm文件，通过添加暂停、结合终端日志断言及使用真实数据，提供直观的视觉证据以辅助代码评审和问题排查。

.agents/skills/playwright-screen-recording/SKILL.md liaohch3/claude-tap

Trigger Scenarios

需要录制浏览器操作视频以进行PR审查需要录制前后对比视频以验证Bug修复需要为回归测试提供视觉证据

Install

npx skills add liaohch3/claude-tap --skill playwright-screen-recording -g -y

More Options

Non-standard path

npx skills add https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording -g -y

Use without installing

npx skills use liaohch3/claude-tap@playwright-screen-recording

指定 Agent (Claude Code)

npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a claude-code -g -y

安装 repo 全部 skill

npx skills add liaohch3/claude-tap --all -g -y

预览 repo 内 skill

npx skills add liaohch3/claude-tap --list

SKILL.md

Frontmatter

{
    "name": "playwright-screen-recording",
    "description": "Record browser test videos with Playwright for PR review and bug fix verification",
    "user_invocable": false
}

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

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

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

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:

# 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