playwright-dev

Guides development of Playwright APIs, MCP tools, CLI commands, and vendored dependencies.

1|Updated May 10, 2026
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill playwright-dev-tgoldi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-dev
Source: https://github.com/Tgoldi/claude-skills/tree/main/playwright-dev
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill playwright-dev-tgoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Contributing to the Playwright codebase requires navigating a complex client-server-dispatcher architecture, protocol definitions, code generation, and strict dependency rules, which is difficult without deep internal knowledge. ## Core Features & Use Cases - API Development Workflow: Step-by-step process for adding or modifying Playwright APIs, from documentation definitions through client, protocol, dispatcher, and server implementation to tests. - MCP Tools and CLI Commands: Patterns for creating new MCP tools with defineTool/defineTabTool, registering capabilities, and wiring CLI commands through the daemon. - Dependency Vendoring: Instructions for bundling third-party npm packages with esbuild into self-contained bundles for playwright-core or playwright. - Use Case: A contributor wants to add a new Page method to Playwright. The skill walks them through defining it in docs/src/api, updating protocol.yml, implementing the client and dispatcher layers, and writing tests in tests/page. ## Quick Start Ask the assistant to walk you through adding a new API method to Playwright using the playwright-dev skill.

Frequently Asked Questions about playwright-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new API method to Playwright?

Define the API in docs/src/api/class-xxx.md first, then implement the client in packages/playwright-core/src/client, define the protocol channel in protocol.yml, add the dispatcher handler, implement server logic, and write tests. Watch mode auto-generates types and validators.

How do I add an MCP tool to Playwright?

Create a tool file in packages/playwright-core/src/tools/backend using defineTabTool or defineTool with a zod input schema, register it in tools.ts, and add tests in tests/mcp. Choose defineTabTool for tab-scoped actions and defineTool for context-level operations.

What is the difference between tests/page and tests/library in Playwright?

tests/page covers user-facing page interactions like clicking, typing, and locators using the page fixture. tests/library covers browser and context lifecycle, launch options, and browser-specific protocol features using browserTest fixtures.

How does Playwright vendor third-party npm dependencies?

Playwright bundles dependencies with esbuild into self-contained files under packages/<package>/bundles/<name>. Each bundle has its own package.json, a BundleImpl entry point, a build.js registration, and a typed wrapper that requires the built output.

Can Playwright client code import server code directly?

No. Client code never imports server code and vice versa; they communicate only through the protocol layer. DEPS.list files in each directory enforce these import constraints via npm run flint.