MCP/playwright-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
playwright-mcp/CLAUDE.md
Ryan Malloy d1100bac8a
Some checks are pending
CI / lint (push) Waiting to run
Details
CI / test (macos-latest) (push) Waiting to run
Details
CI / test (ubuntu-latest) (push) Waiting to run
Details
CI / test (windows-latest) (push) Waiting to run
Details
CI / test_docker (push) Waiting to run
Details
feat: add video recording tools for browser sessions 
Add three new MCP tools for recording browser automation:
- browser_start_recording: Enable video recording with configurable size/filename
- browser_stop_recording: Stop recording and return video file paths
- browser_recording_status: Check recording status and configuration

Key features:
- Automatic video saving when pages/contexts close
- Configurable video size and output directory
- Enhanced LLM guidance with clear workflow instructions
- Integration with existing browser context management

Videos are saved as .webm files in {outputDir}/videos/ directory.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-23 22:16:13 -06:00

3.0 KiB
Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is the Playwright MCP (Model Context Protocol) server - a TypeScript/Node.js project that provides browser automation capabilities through structured accessibility snapshots. It enables LLMs to interact with web pages without requiring screenshots or vision models.

Development Commands

Build:

  • npm run build - Build TypeScript to JavaScript in lib/ directory
  • npm run build:extension - Build browser extension in extension/lib/
  • npm run watch - Watch mode for main build
  • npm run watch:extension - Watch mode for extension build

Testing:

  • npm test - Run all Playwright tests
  • npm run ctest - Run Chrome-specific tests only
  • npm run ftest - Run Firefox-specific tests only
  • npm run wtest - Run WebKit-specific tests only

Linting & Quality:

  • npm run lint - Run linter and type checking (includes README update)
  • npm run lint-fix - Auto-fix linting issues
  • npm run update-readme - Update README with generated tool documentation

Development:

  • npm run clean - Remove built files from lib/ and extension/lib/

Architecture

Core Components:

  • src/index.ts - Main entry point providing createConnection() API
  • src/server.ts - MCP server implementation with connection management
  • src/connection.ts - Creates MCP server with tool handlers and request processing
  • src/tools.ts - Aggregates all available tools from src/tools/ directory
  • src/context.ts - Browser context management and state handling
  • src/browserContextFactory.ts - Factory for creating browser contexts with different configurations

Tool System:

  • All browser automation tools are in src/tools/ directory
  • Each tool file exports an array of tool definitions
  • Tools are categorized by capability: core, tabs, install, pdf, vision
  • Tool capabilities are filtered based on config to enable/disable features

Browser Management:

  • Supports multiple browsers: Chrome, Firefox, WebKit, Edge
  • Two modes: persistent profile (default) or isolated contexts
  • Browser contexts are created through factory pattern for flexibility
  • CDP (Chrome DevTools Protocol) support for remote browser connections

Configuration:

  • src/config.ts - Configuration resolution and validation
  • Supports both CLI arguments and JSON config files
  • Browser launch options, context options, network settings, capabilities

Transport:

  • Supports both STDIO and HTTP/SSE transports
  • STDIO for direct MCP client connections
  • HTTP mode for standalone server operation

Key Files

  • cli.js - CLI entry point (imports lib/program.js)
  • src/program.ts - Command-line argument parsing and server setup
  • playwright.config.ts - Test configuration for multiple browser projects
  • tests/fixtures.ts - Custom Playwright test fixtures for MCP testing

Extension

The extension/ directory contains a browser extension for CDP relay functionality, built separately with its own TypeScript config.