Agent skill

browsing-with-playwright

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use for web browsing, form submission, web scraping, or UI testing. NOT for static content (use curl/wget).

View SKILL.md on GitHub Repository
Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/alijilani-dev/Claude/tree/main/skills/resume_optimizer/.claude/skills/browsing-with-playwright

SKILL.md

Browser Automation

Automate browser interactions via Playwright MCP server.

Server Lifecycle

Start Server

bash
# Using helper script (recommended)
bash scripts/start-server.sh

# Or manually
npx @playwright/mcp@latest --port 8808 --shared-browser-context &

Stop Server

bash
# 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

bash
# 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

bash
# 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:

bash
# 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

bash
# 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

bash
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:

bash
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

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

alijilani-dev/Claude

docker-rocker

Production-grade Docker containerization for FastAPI, Pytest, SQLModel, and Pydantic projects. This skill should be used when users ask to dockerize FastAPI applications, create multi-stage Docker builds, optimize Docker images for Python APIs, set up CI/CD Docker pipelines, or deploy containerized Python web APIs with maximum performance and minimal image size.

0 0
Explore
alijilani-dev/Claude

fastapi-helper

FastAPI development assistant for building modern Python web APIs. Provides guidance on routing, request/response handling, dependency injection, authentication, middleware, WebSockets, testing, and Pydantic models. Use when: (1) Creating FastAPI applications or endpoints, (2) Implementing CRUD operations, (3) Setting up authentication/authorization, (4) Working with request parameters (path, query, body, headers, cookies, forms, files), (5) Configuring middleware or CORS, (6) Implementing WebSocket connections, (7) Writing tests for FastAPI apps, (8) Defining Pydantic models for validation.

0 0
Explore
alijilani-dev/Claude

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

0 0
Explore
alijilani-dev/Claude

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

0 0
Explore
alijilani-dev/Claude

cover-letter-generator

Generate tailored AI-focused cover letters using the PSI (Problem-Solution-Impact) methodology. Use when: (1) User wants to create cover letters for AI/ML job applications, (2) User provides a resume and wants LinkedIn job matching, (3) User asks for personalized cover letters based on job postings, (4) User mentions applying for AI Engineer, ML Engineer, or similar technical roles. Integrates market intelligence, LinkedIn research via Playwright, and professional writing standards.

0 0
Explore
alijilani-dev/Claude

skill-validator

Validates skills against production-level criteria with 9-category scoring. This skill should be used when reviewing, auditing, or improving skills to ensure quality standards. Evaluates structure, content, user interaction, documentation, domain standards, technical robustness, maintainability, zero-shot implementation, and reusability. Returns actionable validation report with scores and improvement recommendations.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results