Playwright MCP server
A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Install the Playwright MCP server in VS Code using one of these buttons:
Alternatively, you can install the Playwright MCP server using the VS Code CLI:
# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
The Playwright MCP server supports the following command-line options:
--browser <browser>: Browser or chrome channel to use. Possible values:
chrome, firefox, webkit, msedgechrome-beta, chrome-canary, chrome-devmsedge-beta, msedge-canary, msedge-devchrome--caps <caps>: Comma-separated list of capabilities to enable, possible values: tabs, pdf, history, wait, files, install. Default is all.--cdp-endpoint <endpoint>: CDP endpoint to connect to--executable-path <path>: Path to the browser executable--headless: Run browser in headless mode (headed by default)--port <port>: Port to listen on for SSE transport--user-data-dir <path>: Path to the user data directory--vision: Run server that uses screenshots (Aria snapshots are used by default)Playwright MCP will launch the browser with the new profile, located at
- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile` on Windows
- `~/Library/Caches/ms-playwright/mcp-chrome-profile` on macOS
- `~/.cache/ms-playwright/mcp-chrome-profile` on Linux
All the logged in information will be stored in that profile, you can delete it between sessions if you'd like to clear the offline state.
This mode is useful for background or batch operations.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--headless"
]
}
}
}
When running headed browser on system w/o display or from worker processes of the IDEs,
run the MCP server from environment with the DISPLAY and pass the --port flag to enable SSE transport.
npx @playwright/mcp@latest --port 8931
And then in MCP client config, set the url to the SSE endpoint:
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/sse"
}
}
}
The tools are available in two modes:
To use Vision Mode, add the --vision flag when starting the server:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--vision"
]
}
}
}
Vision Mode works best with the computer use models that are able to interact with elements using X Y coordinate space, based on the provided screenshot.
import { createServer } from '@playwright/mcp';
// ...
const server = createServer({
launchOptions: { headless: true }
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);
browser_click
element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshotbrowser_hover
element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshotbrowser_drag
startElement (string): Human-readable source element description used to obtain permission to interact with the elementstartRef (string): Exact source element reference from the page snapshotendElement (string): Human-readable target element description used to obtain permission to interact with the elementendRef (string): Exact target element reference from the page snapshotbrowser_type
element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshottext (string): Text to type into the elementsubmit (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.browser_select_option
element (string): Human-readable element description used to obtain permission to interact with the elementref (string): Exact target element reference from the page snapshotvalues (array): Array of values to select in the dropdown. This can be a single value or multiple values.browser_snapshot
browser_take_screenshot
raw (boolean, optional): Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.browser_screen_move_mouse
element (string): Human-readable element description used to obtain permission to interact with the elementx (number): X coordinatey (number): Y coordinatebrowser_screen_capture
browser_screen_click
element (string): Human-readable element description used to obtain permission to interact with the elementx (number): X coordinatey (number): Y coordinatebrowser_screen_drag
element (string): Human-readable element description used to obtain permission to interact with the elementstartX (number): Start X coordinatestartY (number): Start Y coordinateendX (number): End X coordinateendY (number): End Y coordinatebrowser_screen_type
text (string): Text to typesubmit (boolean, optional): Whether to submit entered text (press Enter after)browser_press_key
key (string): Name of the key to press or a character to generate, such as ArrowLeft or abrowser_tab_list
browser_tab_new
url (string, optional): The URL to navigate to in the new tab. If not provided, the new tab will be blank.browser_tab_select
index (number): The index of the tab to selectbrowser_tab_close
index (number, optional): The index of the tab to close. Closes current tab if not provided.browser_navigate
url (string): The URL to navigate tobrowser_navigate_back
browser_navigate_forward
key (string): Name of the key to press or a character to generate, such as ArrowLeft or abrowser_file_upload
paths (array): The absolute paths to the files to upload. Can be a single file or multiple files.browser_pdf_save
browser_wait
time (number): The time to wait in seconds (capped at 10 seconds)browser_close
browser_install