Playwright MCP

A Model Context Protocol server that provides browser automation capabilities using Playwright. Enables LLMs to interact with web pages through structured accessibility snapshots — no vision models required.

Example

You: Navigate to https://demo.playwright.dev/todomvc and add "Buy groceries".

→ browser_navigate { url: "https://demo.playwright.dev/todomvc" }

  - heading "todos" [level=1] [ref=e3]
  - textbox "What needs to be done?" [ref=e5]

→ browser_type { target: "e5", text: "Buy groceries", submit: true }

  - heading "todos" [level=1] [ref=e3]
  - textbox "What needs to be done?" [ref=e5]
  - list [ref=e8]:
    - listitem [ref=e9]:
      - checkbox "Toggle Todo" [ref=e10]
      - text: Buy groceries
  - contentinfo [ref=e12]:
    - text: 1 item left

The LLM reads the accessibility snapshot, finds element refs like e5, and passes them as the target of the next tool call — clicking buttons, filling forms, checking checkboxes. No screenshots or coordinate guessing needed.

Key Features

• Snapshot-based — operates on the accessibility tree, not pixels. Each element gets a unique ref for deterministic interaction
• LLM-friendly — structured text output that LLMs parse naturally, far cheaper than DOM dumps or screenshots
• Cross-browser — Chrome, Firefox, WebKit, and Edge support
• Full automation — 70+ tools covering navigation, forms, network mocking, storage, tracing, video, and more
• Persistent sessions — login state and cookies preserved between sessions by default
• Works everywhere — VS Code, Cursor, Windsurf, Claude Code, Claude Desktop, and any MCP client

Quick Start

Add the server to your MCP client:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

The browser opens in headed mode by default so you can see what's happening. See Installation for client-specific setup.

Playwright MCP vs Playwright CLI

	MCP	Playwright CLI
Best for	Specialized agentic loops, exploratory automation	Coding agents (Claude Code, Copilot) working with large codebases
How it works	LLM calls MCP tools with structured parameters	Agent runs shell commands
Token cost	Higher — tool schemas + snapshots in context	Lower — concise CLI output, skills loaded on demand
Default mode	Headed	Headless
Setup	JSON config in MCP client	npm install -g @playwright/cli

Available Tools

Core (always enabled)

Tool	Description
browser_navigate	Navigate to a URL
browser_navigate_back	Go back in history
browser_snapshot	Capture accessibility snapshot
browser_find	Search the snapshot for text or a regexp
browser_click	Click an element
browser_hover	Hover over an element
browser_drag	Drag and drop between elements
browser_drop	Drop files or MIME-typed data onto an element
browser_type	Type text into an element
browser_fill_form	Fill multiple form fields at once
browser_select_option	Select dropdown option
browser_press_key	Press a key (Enter, Tab, etc.)
browser_take_screenshot	Take a PNG/JPEG/WebP screenshot
browser_tabs	List, create, close, select tabs
browser_handle_dialog	Accept or dismiss dialogs
browser_file_upload	Upload files into a file chooser
browser_console_messages	Get console output
browser_network_requests	List network requests
browser_network_request	Show one request in full detail
browser_evaluate	Evaluate JavaScript on page or element
browser_run_code_unsafe	Execute a Playwright code snippet
browser_wait_for	Wait for text or time
browser_close	Close the page
browser_resize	Resize the browser window

Network (--caps=network)

Tool	Description
browser_route	Mock network requests
browser_route_list	List active mocked routes
browser_unroute	Remove mocked routes
browser_network_state_set	Go online or offline

Storage (--caps=storage)

Tool	Description
browser_cookie_list/get/set/delete/clear	Manage cookies
browser_localstorage_list/get/set/delete/clear	Manage localStorage
browser_sessionstorage_list/get/set/delete/clear	Manage sessionStorage
browser_storage_state	Save cookies + local storage to a file
browser_set_storage_state	Restore saved state

Testing (--caps=testing)

Tool	Description
browser_generate_locator	Generate a Playwright locator for tests
browser_verify_element_visible	Assert element is visible
browser_verify_text_visible	Assert text is visible
browser_verify_list_visible	Assert a list and its items are visible
browser_verify_value	Assert form field value

Developer tools (--caps=devtools)

Tool	Description
browser_start_tracing / browser_stop_tracing	Record execution traces
browser_start_video / browser_stop_video	Record session video
browser_video_chapter	Add a chapter card to the video
browser_video_show_actions / browser_video_hide_actions	Toggle action callouts
browser_start_recording / browser_stop_recording	Record manual actions as code
browser_highlight / browser_hide_highlight	Highlight an element on the page
browser_annotate	Ask the user to draw annotations on the page
browser_resume	Resume paused script execution

PDF (--caps=pdf)

Tool	Description
browser_pdf_save	Export page as PDF

Vision (--caps=vision)

Tool	Description
browser_mouse_move_xy	Move mouse to coordinates
browser_mouse_click_xy	Click at coordinates
browser_mouse_drag_xy	Drag between coordinates
browser_mouse_down / browser_mouse_up	Mouse button press/release
browser_mouse_wheel	Scroll with mouse wheel

Config (--caps=config)

Tool	Description
browser_get_config	Get the resolved config