Agent skill

Playwright Screen Recording

Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence.

MITAuto-check passedTesting & QA

Install Playwright Screen Recording

skills CLI

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .claude/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .claude/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .agents/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .agents/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .cursor/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .cursor/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/liaohch3/claude-tap.git --path .agents/skills/playwright-screen-recording

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .gemini/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .gemini/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .github/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .github/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap playwright-screen-recording --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/playwright-screen-recording .opencode/skills/playwright-screen-recording && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "playwright-screen-recording" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/playwright-screen-recording into .opencode/skills/playwright-screen-recording/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-screen-recording", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: playwright-screen-recording
GitHub stars: 3.3k
Token cost: ~714 tokens
SKILL.md length: 159 words
Files: 1
Skills in repo: 11
Repo updated: Sep 22, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence.

Showing a PR reviewer that a bug fix works with before and after footage
SKILL.md covers Core Usage, Use Cases, Recording Tips and Notes
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Keeping visual evidence that a critical interaction path passes

What it does

Playwright's built-in video recording captures a headless browser session as a .webm file (VP8), which can be attached to a pull request or used to prove a bug fix. The skill shows the pattern with the Python sync API and suggests recording before and after states, regression paths and other interactions that would otherwise be described in words.

Practical tips cover adding short pauses between actions, about 800 milliseconds in the example, so viewers can see each click; printing expected and actual state to the terminal alongside the video as a second check; and building demo pages from real trace data rather than synthetic data.

Each page produces its own video file, record_video_size sets the resolution and should match the viewport, recording works without a display, and files are typically a few hundred KB, small enough to attach to a PR or chat message.

When your agent uses it

Showing a PR reviewer that a bug fix works with before and after footage
Keeping visual evidence that a critical interaction path passes
Recording a headless browser test run when no display is available

Example prompts

“Record a video of the checkout fix with Playwright so I can attach it to the PR.”
“Capture a before and after recording of the disabled prev button bug.”
“Make a short .webm showing the login flow passing, with a pause after each click.”

Requirements

Python with the Playwright package
A browser flow or test script to record

What it can do on your machine

Read from SKILL.md and the folder at commit 4cc867d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are python).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Playwright Screen Recording loads about 714 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 159 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~27
When it runs · the whole SKILL.md, loaded when a task matches: ~714

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from liaohch3/claude-tap at commit 4cc867d, republished under its MIT licence (© liaohch3). 159 words, ~714 tokens.

Download SKILL.mdSave it as .claude/skills/playwright-screen-recording/SKILL.md (or your agent's skills folder).

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

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

Files

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

Open the folder on GitHubat commit 4cc867d

Compare with similar skills

Playwright Screen Recording next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Playwright Screen Recording compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Playwright Screen Recording this skillliaohch3/claude-tap	3.3k	—	~714	Automated safety check: Pass	MIT	17 days ago
Web Application Testinganthropics/skills	180k	51 repos	~966	Automated safety check: Pass	Apache-2.0	yesterday
RStudio Selenium to Playwright Migrationrstudio/rstudio	5.1k	—	~3.6k	Automated safety check: Pass	Custom licence	yesterday
Liteyuki Webui FrontendLiteyukiStudio/LiteyukiBot	157	—	~2.5k	Automated safety check: Pass	Custom licence	1 mo ago
PR Screenshotsbradygaster/squad	3.3k	—	~1.1k	Automated safety check: Pass	MIT	today
Brightdata Proxybrightdata/skills	264	—	~5.1k	Automated safety check: Pass	MIT	2 days ago

Similar skills

Web Application Testing
anthropics/skills
Official
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
180k GitHub starsUsed in 51 repos~966 tokens
Testing & QAAuto-check passed
RStudio Selenium to Playwright Migration
rstudio/rstudio
Converts RStudio Python Selenium electron tests into TypeScript Playwright tests, checking each against a live RStudio before counting it as migrated.
5.1k GitHub stars~3.6k tokensUpdated yesterday
Testing & QAAuto-check passed
Liteyuki Webui Frontend
LiteyukiStudio/LiteyukiBot
Build, review, or test LiteyukiBot v7's React/Vite WebUI under webui/ and its packaged static delivery in packages/webui/.
157 GitHub stars~2.5k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
PR Screenshots
bradygaster/squad
Capture Playwright screenshots and embed them in GitHub PR descriptions
3.3k GitHub stars~1.1k tokensUpdated today
Testing & QAAuto-check passed
Brightdata Proxy
brightdata/skills
Generate working code that routes HTTP requests through Bright Data proxy networks (Datacenter, ISP, Residential, Mobile) and help users decide which network and IP pool type to use (shared pool…
264 GitHub stars~5.1k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Hands On Test
ktnyt/cclsp
Performs manual hands-on testing of a web application using playwright-cli.
675 GitHub stars~1.7k tokensUpdated 7 mo ago
Testing & QAAuto-check passed

Questions about Playwright Screen Recording

What does Playwright Screen Recording do?

Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence. webm file (VP8), which can be attached to a pull request or used to prove a bug fix. The skill shows the pattern with the Python sync API and suggests recording before and after states, regression paths and other interactions that would otherwise be described in words.

When should I use Playwright Screen Recording?

Playwright Screen Recording fits situations like: showing a PR reviewer that a bug fix works with before and after footage; keeping visual evidence that a critical interaction path passes; recording a headless browser test run when no display is available.

How do I install Playwright Screen Recording in Claude Code?

Run `npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a claude-code`. Or copy the skill folder (.agents/skills/playwright-screen-recording in liaohch3/claude-tap) into .claude/skills/playwright-screen-recording in your project. Claude Code loads it when a task matches its description.

How do I install Playwright Screen Recording in Codex?

Run `npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a codex`. Or copy the skill folder (.agents/skills/playwright-screen-recording in liaohch3/claude-tap) into .agents/skills/playwright-screen-recording in your project. Codex loads it when a task matches its description.

Can I use Playwright Screen Recording in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add liaohch3/claude-tap --skill playwright-screen-recording -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/playwright-screen-recording, .gemini/skills/playwright-screen-recording, .github/skills/playwright-screen-recording and .opencode/skills/playwright-screen-recording in your project.

What does Playwright Screen Recording need to run?

SKILL.md names no scripts, command-line tools or credentials: Playwright Screen Recording is instructions for the agent only. Our summary lists: Python with the Playwright package; A browser flow or test script to record.

Does Playwright Screen Recording access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Playwright Screen Recording safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Playwright Screen Recording use?

Playwright Screen Recording is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Playwright Screen Recording use?

About 714 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Playwright Screen Recording?

Skills that share tags, products or a category with Playwright Screen Recording: Web Application Testing (anthropics/skills, 180k stars), RStudio Selenium to Playwright Migration (rstudio/rstudio, 5.1k stars), Liteyuki Webui Frontend (LiteyukiStudio/LiteyukiBot, 157 stars) and PR Screenshots (bradygaster/squad, 3.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Playwright Screen Recording?

liaohch3 (a GitHub user) maintains it in liaohch3/claude-tap, which has 3,271 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on September 22, 2026.

Source: liaohch3/claude-tap on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Playwright Screen Recording

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Playwright Screen Recording for Test Verification

Core Usage

Use Cases

Recording Tips

Add pauses between actions

Combine assertions with terminal logging

Prefer real data

Notes

Files

Compare with similar skills

Similar skills

More from liaohch3/claude-tap

Related

Questions about Playwright Screen Recording