---
id: sm-playwright-mcp-dev
name: "playwright-mcp-dev"
url: https://skills.yangsir.net/skill/sm-playwright-mcp-dev
author: microsoft
domain: testing
tags: ["playwright", "end-to-end-testing", "browser-automation", "web-testing", "ci/cd"]
install_count: 327
rating: 4.10 (46 reviews)
github: https://github.com/microsoft/playwright
---

# playwright-mcp-dev

> 指导如何在Playwright MCP中添加新工具，包括创建工具文件、注册工具及添加工具能力，扩展自动化测试框架的功能。

**Stats**: 327 installs · 4.1/5 (46 reviews)

## Before / After 对比

### Playwright MCP工具测试

## Readme

# playwright-mcp-dev

# MCP

## Adding MCP Tools

- Create a new tool in `packages/playwright/src/mcp/browser/tools/your-tool.ts`

- Register the tool in `packages/playwright/src/mcp/browser/tools.ts`

- Add ToolCapability in `packages/playwright/src/mcp/config.d.ts`

- Place new tests in `tests/mcp/mcp-<category>.spec.ts`

## Building

- Assume watch is running at all times, run lint to see type errors

## Testing

- Run tests as `npm run ctest-mcp <category>`

- Do not run test --debug

# CLI

## Adding commands

- CLI commands are based on MCP tools. Implement the corresponding MCP tool as per `Adding MCP Tools` section above, if needed.

- Add new CLI category for tool if needed:

Add Category in `packages/playwright/src/mcp/terminal/command.ts`

- Update doc generator `packages/playwright/src/mcp/terminal/helpGenerator.ts`

- Register command in `packages/playwright/src/mcp/terminal/commands.ts`

- Update skill file at `packages/playwright/src/skill/SKILL.md` and references if necessary
in `packages/playwright/src/skill/references/`

- Place new tests in `tests/mcp/cli-<category>.spec.ts`

## Adding CLI options or Config options

When you need to add something to config.

- `packages/playwright/src/mcp/program.ts`

add CLI option and doc

- `packages/playwright/src/mcp/config.d.ts`

add and document the option

- `packages/playwright/src/mcp/config.ts`

modify FullConfig if needed

- and CLIOptions if needed

- add it to configFromEnv

## Building

- Assume watch is running at all times, run lint to see type errors

## Testing

- Run tests as `npm run ctest-mcp cli-<category>`

- Do not run test --debug

# Lint

- run `npm run flint` to lint everything before commit

# SKILL File

The skill file is located at `packages/playwright/src/skill/SKILL.md`. It contains documentation for all available CLI commands and MCP tools. Update it whenever you add new commands or tools.
At any point in time you can run "npm run playwright-cli -- --help" to see the latest available commands and use them to update the skill file.
Weekly Installs313Repository[microsoft/playwright](https://github.com/microsoft/playwright)GitHub Stars84.4KFirst SeenFeb 2, 2026Security Audits[Gen Agent Trust HubPass](/microsoft/playwright/playwright-mcp-dev/security/agent-trust-hub)[SocketPass](/microsoft/playwright/playwright-mcp-dev/security/socket)[SnykPass](/microsoft/playwright/playwright-mcp-dev/security/snyk)Installed onopencode266codex241gemini-cli231claude-code217github-copilot209cursor147

---
*Source: https://skills.yangsir.net/skill/sm-playwright-mcp-dev*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-playwright-mcp-dev/markdown*