Playwright E2E Testing
activepieces/activepieces
Playwright modern end-to-end testing framework with cross-browser automation, auto-wait, and built-in test runner
Drives a live browser through the Playwright MCP server to navigate, inspect, fill forms and screenshot pages, with snapshot-first habits and output-size care.
Install Playwright MCP Browser Control
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Hainrixz/editor-pro-max playwright-mcp --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/playwright-mcp .claude/skills/playwright-mcp && rm -rf skills-srcUse ~/.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/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .claude/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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 install https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcpType 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.
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Hainrixz/editor-pro-max playwright-mcp --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/playwright-mcp .agents/skills/playwright-mcp && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .agents/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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.
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Hainrixz/editor-pro-max playwright-mcp --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/playwright-mcp .cursor/skills/playwright-mcp && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .cursor/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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 https://github.com/Hainrixz/editor-pro-max.git --path .agents/skills/playwright-mcp--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Hainrixz/editor-pro-max playwright-mcp --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/playwright-mcp .gemini/skills/playwright-mcp && rm -rf skills-srcUse ~/.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/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .gemini/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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.
$ gh skill install Hainrixz/editor-pro-max playwright-mcpInstalls 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).
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/playwright-mcp .github/skills/playwright-mcp && rm -rf skills-srcUse ~/.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/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .github/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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.
$ npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Hainrixz/editor-pro-max playwright-mcp --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hainrixz/editor-pro-max.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/playwright-mcp .opencode/skills/playwright-mcp && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "playwright-mcp" agent skill from https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/playwright-mcp into .opencode/skills/playwright-mcp/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright-mcp", 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-mcp- GitHub stars
- 264
- Token cost
- ~2k tokens
- SKILL.md length
- 729 words
- Files
- 1
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Drives a live browser through the Playwright MCP server to navigate, inspect, fill forms and screenshot pages, with snapshot-first habits and output-size care.
- Works in 3 steps: Navigate to the page → Get page structure (always do this… → Analyze the snapshot: Identify…
- Opening a local dev server page and inspecting its structure
- SKILL.md covers Critical: These Are Direct…, Critical: Always Snapshot…, Critical: Output Size Awareness and Workflow 1: Navigate & Inspect, plus 5 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
This skill teaches an agent to drive a live browser through the Playwright MCP server in order to navigate pages, inspect elements, fill forms and debug web interfaces. It stresses that the MCP tools, all prefixed `mcp__playwright__`, are called directly like any other tool and not through shell commands.
Two habits are enforced. The agent must take a `browser_snapshot` before any click, type or hover, because the snapshot's accessibility tree supplies the `ref` values those tools require. It also watches output size: snapshots scale with page complexity, screenshots are large base64 images to use sparingly, and console and network listings can be huge, while navigate, click and type return small results. Snapshots are preferred for understanding page structure, and screenshots for visual checks only.
The first workflow, navigate and inspect, opens a page such as a local dev server, takes a snapshot and reports the page structure and interactive elements back to you. More workflows follow in the full file, but the text available here stops after the first.
When your agent uses it
- Opening a local dev server page and inspecting its structure
- Filling in and submitting a form in a live browser
- Debugging a web UI problem by reading console and network output
- Taking a screenshot to verify a visual change
Example prompts
- “Open http://localhost:3010 and tell me what interactive elements are on the page.”
- “Fill in the signup form with a test account and report any validation errors.”
- “Check the browser console for errors after clicking the Save button.”
- “Take a screenshot of the settings page so I can check the layout.”
Requirements
- The Playwright MCP server connected to the agent
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Navigate to the page
- Get page structure (always do this before interacting)
- Analyze the snapshot: Identify interactive elements (buttons, links, inputs) by their ref values. Report page structure to user.
What it can do on your machine
Read from SKILL.md and the folder at commit 743f46c. 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.
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 MCP Browser Control loads about 2k tokens when it runs. Until then it costs about 30 tokens; SKILL.md has 729 words of instructions outside code blocks.
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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 729 words (~1,957 tokens).
“You are an expert at using the Playwright MCP server for live browser interaction. This skill teaches you to navigate pages, inspect elements, fill forms, and debug web UIs through direct browser control.”
- name
- playwright-mcp
- metadata.version
- 1.0.0
- metadata.mcp-server
- playwright
Files
Just SKILL.md in .agents/skills/playwright-mcp of Hainrixz/editor-pro-max.
Open the folder on GitHubat commit 743f46c
Compare with similar skills
Playwright MCP Browser Control 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Playwright MCP Browser Control this skillHainrixz/editor-pro-max | 264 | — | ~2k | Automated safety check: Pass | Custom licence | |
| Playwright E2E Testingactivepieces/activepieces | 25k | — | ~6.8k | Automated safety check: Pass | Custom licence | |
| Playwright MCPCraftOS-dev/CraftBot | 392 | 1 repos | ~1k | Automated safety check: Pass | MIT | |
| Lightpandalightpanda-io/agent-skill | 101 | — | ~6k | Automated safety check: Pass | Apache-2.0 | |
| Browser UseQwenLM/qwen-code-examples | 143 | — | ~451 | Automated safety check: Pass | None | |
| Playwright MCP Skillholon-run/uxc | 116 | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Playwright MCP
CraftOS-dev/CraftBot
Browser automation via Playwright MCP server. An agent skill from CraftOS-dev/CraftBot.
Lightpanda
lightpanda-io/agent-skill
Lightpanda browser, drop-in replacement for Chrome-based browsing in any AI agent - faster and lighter for tasks without graphical rendering like data retrieval.
Browser Use
QwenLM/qwen-code-examples
Control browser pages using the Playwright MCP server. An agent skill from QwenLM/qwen-code-examples.
Playwright MCP Skill
holon-run/uxc
Run browser automation through @playwright/mcp over UXC stdio MCP, with daemon-friendly session reuse and safe action guardrails.
Cloudflare Browser Rendering
einverne/dotfiles
Guide for implementing Cloudflare Browser Rendering - a headless browser automation API for screenshots, PDFs, web scraping, and testing.
More from Hainrixz/editor-pro-max
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Remotion Render via inference.sh
Hainrixz/editor-pro-max
Renders MP4 videos from React and Remotion TSX code through the inference.sh CLI, with settings for resolution, frame rate, duration and codec.
Awwwards-Level React Animations
Hainrixz/editor-pro-max
Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.
Explainer Video Guide
Hainrixz/editor-pro-max
Guides explainer video production from script formulas and pacing rules to scene generation with the inference.sh command line.
Motion Designer
Hainrixz/editor-pro-max
Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion.
Related
Works with
Categories
Questions about Playwright MCP Browser Control
What does Playwright MCP Browser Control do?
Drives a live browser through the Playwright MCP server to navigate, inspect, fill forms and screenshot pages, with snapshot-first habits and output-size care. This skill teaches an agent to drive a live browser through the Playwright MCP server in order to navigate pages, inspect elements, fill forms and debug web interfaces. It stresses that the MCP tools, all prefixed `mcp__playwright__`, are called directly like any other tool and not through shell commands.
When should I use Playwright MCP Browser Control?
Playwright MCP Browser Control fits situations like: opening a local dev server page and inspecting its structure; filling in and submitting a form in a live browser; debugging a web UI problem by reading console and network output; taking a screenshot to verify a visual change.
How do I install Playwright MCP Browser Control in Claude Code?
Run `npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a claude-code`. Or copy the skill folder (.agents/skills/playwright-mcp in Hainrixz/editor-pro-max) into .claude/skills/playwright-mcp in your project. Claude Code loads it when a task matches its description.
How do I install Playwright MCP Browser Control in Codex?
Run `npx skills add Hainrixz/editor-pro-max --skill playwright-mcp -a codex`. Or copy the skill folder (.agents/skills/playwright-mcp in Hainrixz/editor-pro-max) into .agents/skills/playwright-mcp in your project. Codex loads it when a task matches its description.
Can I use Playwright MCP Browser Control 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 Hainrixz/editor-pro-max --skill playwright-mcp -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-mcp, .gemini/skills/playwright-mcp, .github/skills/playwright-mcp and .opencode/skills/playwright-mcp in your project.
What does Playwright MCP Browser Control need to run?
SKILL.md names no scripts, command-line tools or credentials: Playwright MCP Browser Control is instructions for the agent only. Our summary lists: The Playwright MCP server connected to the agent.
Does Playwright MCP Browser Control 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 MCP Browser Control 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 MCP Browser Control use?
Playwright MCP Browser Control has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Playwright MCP Browser Control use?
About 2k tokens (SKILL.md is roughly 7.8k 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 MCP Browser Control?
Skills that share tags, products or a category with Playwright MCP Browser Control: Playwright E2E Testing (activepieces/activepieces, 25k stars), Playwright MCP (CraftOS-dev/CraftBot, 392 stars), Lightpanda (lightpanda-io/agent-skill, 101 stars) and Browser Use (QwenLM/qwen-code-examples, 143 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Playwright MCP Browser Control?
Hainrixz (a GitHub user) maintains it in Hainrixz/editor-pro-max, which has 264 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on March 26, 2026.
Source: Hainrixz/editor-pro-max on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.