playbooks

home / skills / microsoft / playwright / playwright-dev

playwright-dev skill

/.claude/skills/playwright-dev

This skill explains how to develop Playwright by adding APIs, MCP tools, CLI commands, and vendor dependencies for maintainable core.

npx playbooks add skill microsoft/playwright --skill playwright-dev

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
650 B
---
name: playwright-dev
description: Explains how to develop Playwright - add APIs, MCP tools, CLI commands, and vendor dependencies.
---

# Playwright Development Guide

## Table of Contents

- [Adding and Modifying APIs](api.md) — define API docs, implement client/server, add tests
- [MCP Tools and CLI Commands](mcp-dev.md) — add MCP tools, CLI commands, config options
- [Vendoring Dependencies](vendor.md) — bundle third-party npm packages into playwright-core or playwright

## Build
- Assume watch is running and everything is up to date.
- If not, run `npm run build`.

## Lint
- Run `npm run flint` to lint everything before commit.

Overview

This skill explains how to develop Playwright by adding or modifying APIs, extending MCP tools and CLI commands, and vendoring third-party dependencies. It focuses on practical steps for implementation, testing, and integrating changes into the TypeScript codebase. The guidance assumes a local build/watch workflow and includes linting and testing reminders.

How this skill works

The skill describes how to define API surface and documentation, implement client and server changes in TypeScript, and add unit and integration tests to validate behavior. It shows how to extend MCP tools and CLI commands with new options and configuration, and how to vendor npm packages into playwright-core or the main playwright package. It also covers the development workflow: build/watch, run tests, and lint before committing.

When to use it

  • Adding new Playwright APIs or extending existing API signatures
  • Implementing client/server protocol changes or new test primitives
  • Creating or updating MCP developer tools and CLI commands
  • Bundling third-party npm packages into playwright-core or playwright
  • Onboarding contributors to the Playwright TypeScript codebase
  • Preparing changes that require new tests and documentation

Best practices

  • Define clear API docs and TypeScript types before implementation
  • Add unit and integration tests that exercise both client and server paths
  • Keep MCP and CLI changes backward compatible and document config options
  • Vendor only necessary modules and track provenance to ease upgrades
  • Use npm run build/watch during development and run npm run flint before committing
  • Split changes into small, reviewable commits: API, implementation, tests, docs

Example use cases

  • Expose a new browser context option and update corresponding server RPC
  • Add a CLI subcommand to automate a common testing workflow for CI
  • Vendor a specialized assertion library into playwright-core for offline installs
  • Implement a new MCP tool that generates test scaffolding from templates
  • Change a protocol message and add cross-process tests to validate compatibility

FAQ

Do I need to rebuild the repo after changes?

Yes — run the watch build or npm run build if the watch is not running to compile TypeScript changes.

How do I ensure my CLI changes are correct?

Add unit tests for CLI parsing, integration tests for command behavior, and update documentation for new options.

What is the linting command to run before commit?

Run npm run flint to lint the codebase before committing changes.