
Playwright Development Guide
OfficialFreeComprehensive resource for developing with Playwright.
Free · Opens the source repo
What Playwright Development Guide does
The Playwright Development Guide is a detailed resource designed for developers who are looking to enhance their skills in building and modifying the Playwright framework. This guide covers the essential aspects of Playwright development, including the architecture of the library, how to add and modify APIs, and the integration of various tools and command-line interfaces. Developers will find a structured approach to understanding the client/server architecture, the protocol layer, and the rules governing dependencies, which are crucial for effective development.
The guide includes specific sections on adding APIs, which detail how to define API documentation, implement client/server interactions, and create tests to ensure functionality. Additionally, it provides insights into adding MCP tools and CLI commands, allowing developers to customize their development environment to suit their needs. The resource also addresses vendor dependencies, explaining how to manage npm packages and utilize various bundles effectively.
For those working with WebKit and Safari, the guide offers instructions on updating the Safari version string and working with the WebView backend. It also explains how to reproduce regressions through bisecting published versions, providing a systematic way to identify issues between different releases. The dashboard section details the UI that supports the Playwright CLI, enabling developers to work efficiently with the command line.
This skill is particularly beneficial for developers who are actively contributing to the Playwright project or those who want to deepen their understanding of its architecture and capabilities. By following the guidelines laid out in this resource, users can effectively navigate the complexities of Playwright development and contribute to its evolution.
When to use it
Use this skill when you are working on developing, testing, or contributing to the Playwright framework.
When not to use it
This skill may not be suitable for users looking for general web automation tools or those unfamiliar with JavaScript and testing frameworks.
What you can build with it
Contributing to Playwright
If you are looking to contribute code or features to the Playwright project, this guide provides the necessary framework and rules.
Modifying APIs
When you need to add or change APIs within Playwright, this resource outlines the steps and best practices to do so.
Setting Up MCP Tools
For developers looking to integrate MCP tools and CLI commands into their workflow, this guide offers clear instructions.
How to install Playwright Development Guide
View source1. Install with the skills CLI
npx skills add microsoft/playwright/playwright-dev --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by microsoftPlaywright Development Guide
See CLAUDE.md for monorepo structure, build/test/lint commands, and coding conventions.
Detailed Guides
- Library Architecture — client/server/dispatcher structure, protocol layer, DEPS rules
- Adding and Modifying APIs — define API docs, implement client/server, add tests
- MCP Tools and CLI Commands — add MCP tools, CLI commands, config options
- Vendor Dependencies & Bundling — utilsBundle, coreBundle, babelBundle; adding vendored npm packages; DEPS.list;
check_deps - Updating WebKit Safari Version — update the Safari version string in the WebKit user-agent
- WebView (iOS Safari) Backend —
webkit/webview/against stock Mobile Safari; provisional-target pause/resume; what's upstream vs Playwright patches; local + CI test setup - Bisecting Across Published Versions — reproduce regressions side-by-side from npm and diff
node_modules/playwright/lib/between versions - Dashboard - the UI powering the "playwright cli show" command, and how to work on it
Frequently asked questions about Playwright Development Guide
Similar skills
WinMD API Search
Easily find and explore Windows desktop APIs.
WebMCPify
Transform any web app into an agent-ready platform.
Phoenix Tracing
Instrument LLM applications with OpenInference tracing.
Foundry Hosted Agent CopilotKit
Guidance for developing agentic web apps on Azure.
Power Automate Foundation
Connect AI agents to Power Automate seamlessly.
Power Automate Flow Builder
Efficiently build and deploy Power Automate flows programmatically.
