A Model Context Protocol (MCP) server that provides browser automation capabilities using [Playwright](https://playwright.dev). This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.
- **🤖 AI-Human Collaboration System**. Direct JavaScript communication between models and users with `mcpNotify`, `mcpPrompt`, and interactive element selection via `mcpInspector`.
- **🎯 Multi-client identification**. Professional floating debug toolbar with themes to identify which MCP client controls the browser in multi-client environments.
- **📊 Advanced HTTP monitoring**. Comprehensive request/response interception with headers, bodies, timing analysis, and export to HAR/CSV formats.
- **🎬 Intelligent video recording**. Smart pause/resume modes eliminate dead time for professional demo videos with automatic viewport matching.
- **🎨 Custom code injection**. Inject JavaScript/CSS into pages for enhanced automation, with memory-leak-free cleanup and session persistence.
- **📁 Centralized artifact management**. Session-based organization of screenshots, videos, and PDFs with comprehensive audit logging.
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, use `command` type with the command `npx @playwright/mcp`. You can also verify config or add command like arguments via clicking `Edit`.
Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use the standard config above.
[](https://block.github.io/goose/extension?cmd=npx&arg=%40playwright%2Fmcp%40latest&id=playwright&name=Playwright&description=Interact%20with%20web%20pages%20through%20structured%20accessibility%20snapshots%20using%20Playwright)
Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @playwright/mcp`. Click "Add Extension".
[](https://lmstudio.ai/install-mcp?name=playwright&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJAcGxheXdyaWdodC9tY3BAbGF0ZXN0Il19)
#### Or install manually:
Go to `Program` in the right sidebar -> `Install` -> `Edit mcp.json`. Use the standard config above.
Open [Qodo Gen](https://docs.qodo.ai/qodo-documentation/qodo-gen) chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the standard config above.
[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
#### Or install manually:
Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server), use the standard config above. You can also install the Playwright MCP server using the VS Code CLI:
// List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
allowedOrigins?: string[];
// List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
The Playwright MCP server supports centralized artifact storage for organizing all generated files (screenshots, videos, and PDFs) in session-specific directories with comprehensive logging.
- Description: Perform click on a web page. Returns page snapshot after click (configurable via browser_configure_snapshots). Use browser_snapshot for explicit full snapshots.
- Description: Change browser configuration settings like headless/headed mode, viewport size, user agent, device emulation, geolocation, locale, timezone, color scheme, or permissions for subsequent operations. This will close the current browser and restart it with new settings.
- Parameters:
-`headless` (boolean, optional): Whether to run the browser in headless mode
-`proxyServer` (string, optional): Proxy server to use for network requests. Examples: "http://myproxy:3128", "socks5://127.0.0.1:1080". Set to null (empty) to clear proxy.
-`proxyBypass` (string, optional): Comma-separated domains to bypass proxy (e.g., ".com,chromium.org,.domain.com")
<!-- NOTE: This has been generated via update-readme.js -->
- **browser_configure_artifacts**
- Title: Configure artifact storage
- Description: Enable, disable, or configure centralized artifact storage for screenshots, videos, and PDFs during this session. Allows dynamic control over where artifacts are saved and how they are organized.
- Parameters:
-`enabled` (boolean, optional): Enable or disable centralized artifact storage for this session
-`directory` (string, optional): Directory path for artifact storage (if different from server default)
-`sessionId` (string, optional): Custom session ID for artifact organization (auto-generated if not provided)
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Configure how page snapshots are handled during the session. Control automatic snapshots, size limits, and differential modes. Changes take effect immediately for subsequent tool calls.
- Parameters:
-`includeSnapshots` (boolean, optional): Enable/disable automatic snapshots after interactive operations. When false, use browser_snapshot for explicit snapshots.
-`maxSnapshotTokens` (number, optional): Maximum tokens allowed in snapshots before truncation. Use 0 to disable truncation.
-`differentialSnapshots` (boolean, optional): Enable differential snapshots that show only changes since last snapshot instead of full page snapshots.
-`filterFields` (array, optional): Specific fields to search within. Examples: ["element.text", "element.attributes", "console.message", "url"]. Defaults to element and console fields.
-`filterMode` (string, optional): Type of filtering output: "content" (filtered data), "count" (match statistics), "files" (matching items only)
-`caseSensitive` (boolean, optional): Case sensitive pattern matching (default: true)
-`wholeWords` (boolean, optional): Match whole words only (default: false)
-`contextLines` (number, optional): Number of context lines around matches
-`invertMatch` (boolean, optional): Invert match to show non-matches (default: false)
-`maxMatches` (number, optional): Maximum number of matches to return
-`jqSlurp` (boolean, optional): Read entire input into array and process once (jq -s flag). Enables cross-element operations.
-`jqExitStatus` (boolean, optional): Set exit code based on output (jq -e flag). Useful for validation.
-`jqNullInput` (boolean, optional): Use null as input instead of reading data (jq -n flag). For generating new structures.
-`filterOrder` (string, optional): Order of filter application. "jq_first" (default): structural filter then pattern match - recommended for maximum precision. "ripgrep_first": pattern match then structural filter - useful when you want to narrow down first. "jq_only": pure jq transformation without ripgrep. "ripgrep_only": pure pattern matching without jq (existing behavior).
- Description: Dismiss/cancel all open file chooser dialogs without uploading files. Useful when multiple file choosers are stuck open. Returns page snapshot after dismissal (configurable via browser_configure_snapshots).
- Parameters: None
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- **browser_dismiss_file_chooser**
- Title: Dismiss file chooser
- Description: Dismiss/cancel a file chooser dialog without uploading files. Returns page snapshot after dismissal (configurable via browser_configure_snapshots).
- Parameters: None
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Evaluate JavaScript expression on page or element. Returns page snapshot after evaluation (configurable via browser_configure_snapshots).
- Description: Export captured HTTP requests to various formats (JSON, HAR, CSV, or summary report). Perfect for sharing analysis results, importing into other tools, or creating audit reports.
- Description: Retrieve and analyze captured HTTP requests with pagination support. Shows timing, status codes, headers, and bodies. Large request lists are automatically paginated for better performance.
- Description: Install a Chrome extension in the current browser session. Only works with Chromium browser. For best results, use pure Chromium without the "chrome" channel. The extension must be an unpacked directory containing manifest.json.
- Parameters:
-`path` (string): Path to the Chrome extension directory (containing manifest.json)
-`name` (string, optional): Optional friendly name for the extension
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Automatically download and install popular Chrome extensions from their official sources. This works around Chrome channel limitations by fetching extension source code.
- Parameters:
-`extension` (string): Popular extension to install automatically
-`version` (string, optional): Specific version to install (defaults to latest)
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Get a list of all available device emulation profiles including mobile phones, tablets, and desktop browsers. Each device includes viewport, user agent, and capabilities information.
- Parameters: None
- Read-only: **true**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: List all notifications that have been shown during this browser session. Returns notification details including title, body, origin, and status.
- Parameters:
-`origin` (string, optional): Filter notifications by origin URL
-`includeHandled` (boolean, optional): Include notifications that have been clicked or closed (default: true)
- Read-only: **true**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Returns all network requests since loading the page. For more detailed analysis including timing, headers, and bodies, use the advanced request monitoring tools (browser_start_request_monitoring, browser_get_requests).
- Parameters:
-`detailed` (boolean, optional): Show detailed request information if request monitoring is active
- Description: Manually pause the current video recording to eliminate dead time between actions. Useful for creating professional demo videos. In smart recording mode, pausing happens automatically during waits. Use browser_resume_recording to continue recording.
- Parameters: None
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Check if video recording is currently enabled and get recording details. Use this to verify recording is active before performing actions, or to check output directory and settings.
- Parameters: None
- Read-only: **true**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Manually resume previously paused video recording. New video segments will capture subsequent browser actions. In smart recording mode, resuming happens automatically when browser actions begin. Useful for precise control over recording timing in demo videos.
- Parameters: None
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- **browser_reveal_artifact_paths**
- Title: Reveal artifact storage paths
- Description: Show where artifacts (videos, screenshots, etc.) are stored, including resolved absolute paths. Useful for debugging when you cannot find generated files.
- Parameters: None
- Read-only: **true**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Configure intelligent video recording behavior for professional demo videos. Choose from continuous recording, smart auto-pause/resume, action-only capture, or segmented recording. Smart mode is recommended for marketing demos as it eliminates dead time automatically.
- Parameters:
-`mode` (string): Video recording behavior mode:
• continuous: Record everything continuously including waits (traditional behavior, may have dead time)
• smart: Automatically pause during waits, resume during actions (RECOMMENDED for clean demo videos)
• action-only: Only record during active browser interactions, minimal recording time
• segment: Create separate video files for each action sequence (useful for splitting demos into clips)
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Capture complete accessibility snapshot of the current page. Always returns full snapshot regardless of session snapshot configuration. Better than screenshot for understanding page structure.
- Description: Start recording browser session video with intelligent viewport matching. For best results, the browser viewport size should match the video recording size to avoid gray space around content. Use browser_configure to set viewport size before recording.
-`size` (object, optional): Video recording dimensions. IMPORTANT: Browser viewport should match these dimensions to avoid gray borders around content.
- Description: Enable comprehensive HTTP request/response interception and analysis. Captures headers, bodies, timing, and failure information for all browser traffic. Essential for security testing, API analysis, and performance debugging.
- Parameters:
-`urlFilter` (optional): Filter URLs to capture. Can be a string (contains match), regex pattern, or custom function. Examples: "/api/", ".*\.json$", or custom logic
-`captureBody` (boolean, optional): Whether to capture request and response bodies (default: true)
-`maxBodySize` (number, optional): Maximum body size to capture in bytes (default: 10MB). Larger bodies will be truncated
-`autoSave` (boolean, optional): Automatically save captured requests after each response (default: false for performance)
-`outputPath` (string, optional): Custom output directory path. If not specified, uses session artifact directory
- Read-only: **false**
<!-- NOTE: This has been generated via update-readme.js -->
- Description: Finalize video recording session and return paths to all recorded video files (.webm format). Automatically closes browser pages to ensure videos are properly saved and available for use. Essential final step for completing video recording workflows and accessing demo files.
- Description: Take a screenshot of the current page. Images exceeding 8000 pixels in either dimension will be rejected unless allowLargeImages=true. You can't perform actions based on the screenshot, use browser_snapshot for actions.
-`raw` (boolean, optional): Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.
-`filename` (string, optional): File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified.
-`element` (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.
-`ref` (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.
-`fullPage` (boolean, optional): When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots. WARNING: Full page screenshots may exceed API size limits on long pages.
-`allowLargeImages` (boolean, optional): Allow images with dimensions exceeding 8000 pixels (API limit). Default false - will error if image is too large to prevent API failures.
-`element` (string): Human-readable element description used to obtain permission to interact with the element
-`ref` (string): Exact target element reference from the page snapshot
-`text` (string): Text to type into the element
-`submit` (boolean, optional): Whether to submit entered text (press Enter after)
-`slowly` (boolean, optional): Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.
- Description: Wait for text to appear or disappear or a specified time to pass. In smart recording mode, video recording is automatically paused during waits unless recordDuringWait is true.
-`recordDuringWait` (boolean, optional): Whether to keep video recording active during the wait (default: false in smart mode, true in continuous mode)
<!-- NOTE: This has been generated via update-readme.js -->
- **browser_wait_notification**
- Title: Wait for a notification
- Description: Wait for a browser notification to appear, optionally matching specific criteria. Returns when a matching notification is shown or timeout is reached.
- Parameters:
-`title` (string, optional): Wait for notification with this exact title
-`titleContains` (string, optional): Wait for notification with title containing this text
-`origin` (string, optional): Wait for notification from this origin
-`timeout` (number, optional): Maximum time to wait in milliseconds (default: 30000)