browsing-with-playwright

Name: browsing-with-playwright
Author: bilalmk

Browser automation with Playwright MCP for web navigation, form interaction, and data extraction. Supports navigation, element interaction (click, type, select), screenshots, and accessibility snapshots that return element references for precise targeting Includes JavaScript execution via browser_evaluate and multi-step atomic operations through browser_run_code for complex workflows Requires --shared-browser-context flag to maintain browser state across sequential commands; server runs on port 8808 Common workflows covered: form submission, data extraction, waiting for page conditions, and element verification via snapshots

INSTALLATION

npx skills add https://github.com/bilalmk/todo_correct --skill browsing-with-playwright

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

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(); }"}'