browsing-with-playwright
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction. NOT when only fetching static content (use curl/wget instead).
- Installs
- 40
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mjunaidca/mjs-agent-skills --skill browsing-with-playwright- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads browsing-with-playwright automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Browser Automation
Automate browser interactions via Playwright MCP server.
Server Lifecycle
Start Server
# Using helper script (recommended)
bash scripts/start-server.sh
# Or manually
npx @playwright/mcp@latest --port 8808 --shared-browser-context &
Stop Server
# Using helper script (closes browser first)
bash scripts/stop-server.sh
# Or manually
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'
pkill -f "@playwright/mcp"
When to Stop
- End of task: Stop when browser work is complete
- Long sessions: Keep running if doing multiple browser tasks
- Errors: Stop and restart if browser becomes unresponsive
Important: The --shared-browser-context flag is required to maintain browser state across multiple mcp-client.py calls. Without it, each call gets a fresh browser context.
Quick Reference
Navigation
# Go to URL
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \
-p '{"url": "https://example.com"}'
# Go back
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'
Get Page State
# Accessibility snapshot (returns element refs for clicking/typing)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'
# Screenshot
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \
-p '{"type": "png", "fullPage": true}'
Interact with Elements
Use ref from snapshot output to target elements:
# Click element
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \
-p '{"element": "Submit button", "ref": "e42"}'
# Type text
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \
-p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}'
# Fill form (multiple fields)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \
-p '{"fields": [{"ref": "e10", "value": "john@example.com"}, {"ref": "e12", "value": "password123"}]}'
# Select dropdown
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \
-p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}'
Wait for Conditions
# Wait for text to appear
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"text": "Success"}'
# Wait for time (ms)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"time": 2000}'
Execute JavaScript
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \
-p '{"function": "return document.title"}'
Multi-Step Playwright Code
For complex workflows, use browser_run_code to run multiple actions in one call:
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \
-p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}'
Tip: Use browser_run_code for complex multi-step operations that should be atomic (all-or-nothing).
Workflow: Form Submission
- Navigate to page
- Get snapshot to find element refs
- Fill form fields using refs
- Click submit
- Wait for confirmation
- Screenshot result
Workflow: Data Extraction
- Navigate to page
- Get snapshot (contains text content)
- Use browser_evaluate for complex extraction
- Process results
Verification
Run: python3 scripts/verify.py
Expected: ✓ Playwright MCP server running
If Verification Fails
- Run diagnostic:
pgrep -f "@playwright/mcp" - Check: Server process running on port 8808
- Try:
bash scripts/start-server.sh - Stop and report if still failing - do not proceed with downstream steps
Tool Reference
See references/playwright-tools.md for complete tool documentation.
Troubleshooting
| Issue | Solution |
|---|---|
| Element not found | Run browser_snapshot first to get current refs |
| Click fails | Try browser_hover first, then click |
| Form not submitting | Use "submit": true with browser_type |
| Page not loading | Increase wait time or use browser_wait_for |
| Server not responding | Stop and restart: bash scripts/stop-server.sh && bash scripts/start-server.sh |
FAQ
What does the browsing-with-playwright skill do?
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction. NOT when only fetching static content (use curl/wget instead).
How do I install browsing-with-playwright?
Run npx skills add https://github.com/mjunaidca/mjs-agent-skills --skill browsing-with-playwright in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/browsing-with-playwright/ (personal) or .claude/skills/browsing-with-playwright/ (project).
Which AI agents can use browsing-with-playwright?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is browsing-with-playwright safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains browsing-with-playwright?
It is published by mjunaidca in mjunaidca/mjs-agent-skills. It has 40 recorded installs.
More from mjunaidca/mjs-agent-skills
working-with-spreadsheets
mjunaidca/mjs-agent-skills
Creates and edits Excel spreadsheets with formulas, formatting, and financial modeling standards. Use when working with .xlsx files, financial models, data analysis, or formula-heavy spreadsheets. Covers formula recalculation, color coding standards, and common pitfalls.
working-with-documents
mjunaidca/mjs-agent-skills
Creates and edits Office documents: Word (.docx), PDF, and PowerPoint (.pptx). Use when working with document creation, PDF manipulation, presentation generation, tracked changes, or converting between formats.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work