Agent skill
playwright-mcp
Programmatic browser automation using Playwright MCP server. Use when building Claude Code tools or applications that need web automation, testing, scraping, or browser interaction. Provides structured accessibility-based automation without screenshots or vision models.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/playwright-mcp
SKILL.md
Playwright MCP
Programmatic interface for Playwright MCP server - enables browser automation in Node.js applications using structured accessibility snapshots.
Installation
npm install @playwright/mcp @modelcontextprotocol/sdk
Basic Usage
import http from 'http';
import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
// Create MCP server with browser configuration
const connection = await createConnection({
browser: {
launchOptions: { headless: true }
}
});
// Connect with SSE transport
const transport = new SSEServerTransport('/messages', res);
await connection.connect(transport);
Configuration Options
See references/configuration.md for full browser and server configuration options.
Available Tools
See references/tools.md for complete tool documentation including:
- Core automation (click, type, navigate, etc.)
- Tab management
- Screenshots and PDF generation
- JavaScript evaluation
- Network and console inspection
Common Patterns
Headless automation:
const connection = await createConnection({
browser: { launchOptions: { headless: true } }
});
With browser channel:
const connection = await createConnection({
browser: {
launchOptions: {
channel: 'chrome',
headless: false
}
}
});
Isolated contexts:
const connection = await createConnection({
browser: {
isolated: true,
contextOptions: {
storageState: 'path/to/storage.json'
}
}
});
Documentation
- GitHub: https://github.com/microsoft/playwright-mcp
- Playwright Docs: https://playwright.dev
- MCP Protocol: https://modelcontextprotocol.io
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?