mcpField
P
playwright-mcp-dev

playwright-mcp-dev

github.com/microsoftDevelopment98.8k313 installsUpdated today
Repository

About playwright-mcp-dev

A repository skill for contributors extending Playwright’s MCP tools and CLI. It documents implementation, registration, configuration, testing, and lint steps.

Key features

  1. 01MCP tool implementation steps
  2. 02CLI command development guidance
  3. 03Configuration update instructions
  4. 04Testing and lint commands

Use cases

  1. 01Adding a Playwright MCP tool
  2. 02Extending the Playwright CLI
  3. 03Changing MCP or CLI options

MCP support

Covers how to add and register MCP tools in Playwright, including capability configuration and tests.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/microsoft/playwright --skill playwright-mcp-dev

After installing, type/playwright-mcp-devin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported