# playwright-mcp

> MCP Server

This repository hosts Playwright MCP, a server enabling LLMs to interact with web pages using Playwright's accessibility tree, offering fast, lightweight, and deterministic browser automation. It bypasses the need for vision models.

## Overview

- **Category:** Developer Tools
- **Language:** TypeScript
- **Stars:** 36160
- **Forks:** 226
- **Owner:** microsoft
- **GitHub:** https://github.com/microsoft/playwright-mcp
- **Homepage:** https://www.npmjs.com/package/@playwright/mcp
- **Created:** 2025-03-21T17:48:36+00:00
- **Updated:** 2025-07-07T15:34:48+00:00
- **Source:** https://model-context-protocol.com/servers/playwright-llm-accessibility-tree-browser-automation

## Setup

## Setup

1.  Install the Playwright MCP server in VS Code using the provided buttons or the VS Code CLI.
2.  Use the VS Code CLI with `code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'` for VS Code, or `code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'` for VS Code Insiders.
3.  After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
4.  Playwright MCP launches Chrome browser with a new profile in a specific directory depending on the OS, which can be deleted to clear the offline state.
5.  To run headless browser, configure the `mcpServers` with the `--headless` flag.
6.  When running headed browser on Linux w/o DISPLAY, run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable SSE transport, then set the `url` in MCP client config to the SSE endpoint.
7.  To use Vision Mode, add the `--vision` flag when starting the server.

## Tools

## Available Tools

1.  **Fast and lightweight** (Uses Playwright's accessibility tree, not pixel-based input).
2.  **LLM-friendly** (No vision models needed, operates purely on structured data).
3.  **Deterministic tool application** (Avoids ambiguity common with screenshot-based approaches).
4.  **Web navigation and form-filling** (Allows LLMs to navigate and interact with web forms).
5.  **Data extraction from structured content** (Enables extraction of data from web pages).
6.  **Automated testing driven by LLMs** (Supports automated testing workflows).
7.  **General-purpose browser interaction for agents** (Provides a versatile interface for browser interaction).

**Snapshot Mode Tools:**

8.  **browser_navigate** (Navigate to a URL).
9.  **browser_go_back** (Go back to the previous page).
10. **browser_go_forward** (Go forward to the next page).
11. **browser_click** (Perform click on a web page).
12. **browser_hover** (Hover over element on page).
13. **browser_drag** (Perform drag and drop between two elements).
14. **browser_type** (Type text into editable element).
15. **browser_select_option** (Select option in a dropdown).
16. **browser_choose_file** (Choose one or multiple files to upload).
17. **browser_press_key** (Press a key on the keyboard).
18. **browser_snapshot** (Capture accessibility snapshot of the current page).
19. **browser_save_as_pdf** (Save page as PDF).
20. **browser_take_screenshot** (Capture screenshot of the page).
21. **browser_wait** (Wait for a specified time in seconds).
22. **browser_close** (Close the page).

**Vision Mode Tools:**

23. **browser_navigate** (Navigate to a URL).
24. **browser_go_back** (Go back to the previous page).
25. **browser_go_forward** (Go forward to the next page).
26. **browser_screenshot** (Capture screenshot of the current page).
27. **browser_move_mouse** (Move mouse to specified coordinates).
28. **browser_click** (Click at specified coordinates).
29. **browser_drag** (Perform drag and drop operation).
30. **browser_type** (Type text at specified coordinates).
31. **browser_press_key** (Press a key on the keyboard).
32. **browser_choose_file** (Choose one or multiple files to upload).
33. **browser_save_as_pdf** (Save page as PDF).
34. **browser_wait** (Wait for a specified time in seconds).
35. **browser_close** (Close the page).