mcpField
B
browsing-with-playwright

browsing-with-playwright

github.com/mjunaidcaProductivity2840 installsUpdated 11w ago
Repository

About browsing-with-playwright

A skill for browser automation through the Playwright MCP server, intended for workflows that interact with webpages or extract page data. It covers server lifecycle, navigation, element interaction, waits, and multi-step scripts.

Key features

  1. 01Start and stop the Playwright MCP server
  2. 02Navigate and read page snapshots
  3. 03Click elements and enter text
  4. 04Wait for page text or time conditions
  5. 05Run JavaScript and multi-step scripts

Use cases

  1. 01Fill in and submit web forms
  2. 02Extract data from snapshots or scripts
  3. 03Run workflows requiring multiple browser actions

MCP support

The skill performs browser operations through the Playwright MCP server, using MCP tools for navigation, clicking, screenshots, and script execution.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mjunaidca/mjs-agent-skills --skill browsing-with-playwright

After installing, type/browsing-with-playwrightin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
playwright-tools.md
scripts/
mcp-client.py
start-server.sh
stop-server.sh
verify.py

Details

From the project README

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": "[email protected]"}, {"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

  1. Navigate to page
  2. Get snapshot to find element refs
  3. Fill form fields using refs
  4. Click submit
  5. Wait for confirmation
  6. Screenshot result

Workflow: Data Extraction

  1. Navigate to page
  2. Get snapshot (contains text content)
  3. Use browser_evaluate for complex extraction
  4. Process results

Verification

Run: python3 scripts/verify.py

Expected: ✓ Playwright MCP server running

If Verification Fails

  1. Run diagnostic: pgrep -f "@playwright/mcp"
  2. Check: Server process running on port 8808
  3. Try: bash scripts/start-server.sh
  4. Stop and report if still failing - do not proceed with downstream steps

Tool Reference

See references/playwright-tools.md for complete tool documentation.

Troubleshooting

IssueSolution
Element not foundRun browser_snapshot first to get current refs
Click failsTry browser_hover first, then click
Form not submittingUse "submit": true with browser_type
Page not loadingIncrease wait time or use browser_wait_for
Server not respondingStop and restart: bash scripts/stop-server.sh && bash scripts/start-server.sh

Comments

Markdown supported