Playwright MCP Server
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Playwright MCP Servertake a screenshot of the homepage after logging in"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Playwright MCP Server
Microsoft의 Playwright MCP를 참고하여 구현한 Model Context Protocol (MCP) 서버입니다. streamableHttp transport를 사용하여 웹 브라우저 자동화 기능을 제공합니다.
기능
이 서버는 다음과 같은 브라우저 자동화 도구들을 제공합니다:
browser_navigate: URL로 이동
browser_snapshot: 현재 페이지의 접근성 스냅샷 캡처
browser_click: 요소 클릭
browser_type: 텍스트 입력
browser_take_screenshot: 스크린샷 촬영
browser_close: 브라우저 종료
Related MCP server: mcp-browser-automation
설치
npm install사용법
StreamableHttp Transport (권장)
# 기본 포트 3000으로 실행
npm run dev -- --streamable-http
# 특정 포트로 실행
npm run dev -- --streamable-http --port=8080서버가 시작되면 http://localhost:3000/mcp (또는 지정한 포트)에서 MCP 서버에 접근할 수 있습니다.
Stdio Transport
npm run dev프로그래밍 방식 사용법
import { PlaywrightMCPServer } from './src/server.js';
const server = new PlaywrightMCPServer();
// StreamableHttp transport로 시작
await server.start('streamableHttp', 3000);
// 또는 stdio transport로 시작
await server.start('stdio');MCP 클라이언트 연결
MCP 클라이언트에서 이 서버에 연결하려면:
{
"mcpServers": {
"playwright": {
"command": "node",
"args": ["dist/index.js", "--streamable-http", "--port=3000"],
"env": {}
}
}
}개발
# TypeScript 컴파일
npm run build
# 개발 모드 실행
npm run dev
# 프로덕션 빌드 후 실행
npm run build
npm start라이선스
MIT
Available Tools
6 toolsbrowser_clickC
Click on an element
| Name | Required | Description | Default |
|---|---|---|---|
| element | Yes | Human-readable element description | |
| ref | Yes | Exact target element reference from page snapshot |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. 'Click on an element' implies a mutation action (interacting with the browser), but it doesn't disclose critical traits such as what happens on failure (e.g., if element not found), whether it waits for page loads, if it requires specific permissions, or any side effects. This leaves significant gaps for a tool that performs browser interactions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description 'Click on an element' is a single, efficient sentence that front-loads the core action without unnecessary words. It earns its place by directly stating the tool's function, making it highly concise and well-structured for quick understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of browser interaction tools, the description is incomplete. No annotations exist to cover behavioral aspects, and there's no output schema to explain return values. The description alone fails to address key context like error handling, dependencies on other tools (e.g., 'browser_snapshot'), or what constitutes a successful click, making it inadequate for safe and effective use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with clear documentation for both parameters ('element' as human-readable description and 'ref' as exact target reference). The description adds no additional meaning beyond what the schema provides, such as explaining how these parameters interact or usage examples. With high schema coverage, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Click on an element' clearly states the action (click) and target (an element), providing a specific verb+resource combination. However, it doesn't differentiate this tool from potential sibling interactions like 'browser_type' or 'browser_navigate' in terms of when clicking is the appropriate interaction versus typing or navigation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., requiring a page snapshot first), exclusions (e.g., not for non-clickable elements), or comparisons to sibling tools like 'browser_type' for text input. Usage is implied but not explicitly stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser_closeC
Close the browser
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. 'Close the browser' is vague about side effects: does it terminate the entire session, close the current tab, or prompt for unsaved data? No disclosure of destructive behavior or irreversible state changes.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Extremely concise at three words, with no wasted text. However, it may be too brief for an agent to fully understand the tool's scope. Still, it is well-structured and front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool is a destructive action with no annotations or output schema, the description is inadequate. It does not explain what happens after closing, how to reopen, or what the agent should do beforehand. Lacks completeness for safe usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Tool has zero parameters, so baseline is 4. The description adds no parameter information, but the input schema already shows no properties. No additional semantic value needed beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description states 'Close the browser', which is a clear verb+resource action. However, it is minimal and essentially a tautology of the tool name 'browser_close', and does not differentiate from siblings like 'browser_navigate_back' or 'browser_tabs' which also affect browser state.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives such as 'browser_navigate_back' or 'browser_snapshot' before closing. The description offers no context about prerequisites or typical workflows.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser_snapshotB
Capture accessibility snapshot of the current page
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but only states what the tool does without behavioral details. It doesn't disclose whether this is a read-only operation, what permissions are needed, how it handles errors, or the format of the snapshot output, which are critical for a tool interacting with a browser.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, clear sentence with no wasted words, front-loading the key action and target. It's appropriately sized for a simple tool with no parameters.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of browser interactions and lack of annotations or output schema, the description is incomplete. It doesn't explain what an 'accessibility snapshot' entails, how it's returned, or any behavioral constraints, leaving significant gaps for an AI agent to understand tool usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters with 100% schema description coverage, so no parameter information is needed. The description appropriately doesn't mention parameters, earning a baseline score of 4 for not introducing unnecessary details.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('capture') and target ('accessibility snapshot of the current page'), making the purpose immediately understandable. However, it doesn't explicitly differentiate from sibling tools like 'browser_take_screenshot', which might capture visual content rather than accessibility data.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'browser_take_screenshot' or other browser tools. It lacks context about prerequisites (e.g., needing a page loaded) or exclusions, leaving usage unclear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser_take_screenshotC
Take a screenshot of the current page
| Name | Required | Description | Default |
|---|---|---|---|
| filename | No | File name to save the screenshot to | |
| fullPage | No | Take screenshot of full page |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the action but doesn't mention critical details like whether this requires specific permissions, how it handles errors, what format the screenshot is saved in, or where it's stored. For a tool with potential side effects, this is inadequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, clear sentence with zero waste. It's appropriately sized for a simple tool and front-loaded with the core action, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (a screenshot operation with potential side effects), no annotations, and no output schema, the description is insufficient. It doesn't explain what happens after the screenshot is taken (e.g., file saved location, return value), leaving critical gaps for an agent to use it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters ('filename' and 'fullPage'). The description adds no additional meaning beyond what the schema provides, such as explaining default behaviors or usage examples. Baseline 3 is appropriate when the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('take a screenshot') and target ('current page'), providing a specific verb+resource combination. However, it doesn't distinguish this tool from the sibling 'browser_snapshot', which might have overlapping functionality, preventing a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'browser_snapshot' or other browser tools. It lacks context about prerequisites (e.g., requiring an open browser page) or exclusions, offering only a basic statement of functionality.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
browser_typeC
Type text into an element
| Name | Required | Description | Default |
|---|---|---|---|
| element | Yes | Human-readable element description | |
| ref | Yes | Exact target element reference from page snapshot | |
| text | Yes | Text to type into the element |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but offers minimal behavioral context. It states what the tool does but doesn't disclose important traits like whether it simulates human typing speed, handles special keys, validates element existence, or what happens on failure. 'Type text into an element' implies a write operation but lacks details about side effects or error conditions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise with a single, direct sentence that states the core functionality without any wasted words. It's front-loaded and efficiently communicates the essential action.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a browser automation tool with 3 required parameters, no annotations, and no output schema, the description is insufficient. It doesn't explain the relationship between 'element' and 'ref' parameters, what happens after typing, error handling, or how it integrates with other browser tools. The context signals indicate this is part of a browser automation suite, but the description doesn't leverage that context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all three parameters (element, ref, text) with clear descriptions. The description adds no additional meaning about parameters beyond what's in the schema, maintaining the baseline score for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('type text') and target ('into an element'), providing a specific verb+resource combination. However, it doesn't differentiate from sibling tools like browser_click (which interacts with elements differently) or explain its unique role in the browser automation suite.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided about when to use this tool versus alternatives. The description doesn't mention prerequisites (like needing a page snapshot from browser_snapshot), when typing is appropriate versus clicking, or how it relates to other browser tools in the workflow.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
6 tool updates
- First observed
browser_click - First observed
browser_close - First observed
browser_navigate - First observed
browser_snapshot - First observed
browser_take_screenshot - First observed
browser_type
TDQS
Scored across 6 tools
Each tool has a clearly distinct purpose targeting specific browser automation actions: clicking, closing, navigating, capturing accessibility snapshots, taking screenshots, and typing text. There is no overlap or ambiguity between these functions.
All tools follow a consistent 'browser_' prefix with descriptive action suffixes (click, close, navigate, snapshot, take_screenshot, type). This uniform snake_case pattern makes the tool set predictable and easy to understand.
Six tools is reasonable for a browser automation server, covering core interactions like navigation, input, and capture. It could be slightly expanded with tools for element selection or waiting, but the current count is well-scoped and manageable.
The tools cover basic navigation, interaction, and capture functions, but there are notable gaps for common automation tasks: no tools for selecting elements (e.g., by CSS/XPath), waiting for conditions, handling alerts/dialogs, or executing JavaScript. This may limit agent effectiveness in complex scenarios.
Maintenance
Related MCP Connectors
Browserless MCP — wraps the Browserless headless-Chromium REST API (browserless.io)
Hosted real Google Chrome MCP with per-user persistent state. Navigate, click, type, screenshot.
Stealth web browser for agents: search, fetch, click, download and type in persistent MCP sessions.
Access Kernel's cloud-based browsers and app actions via MCP (remote HTTP + OAuth).
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables browser automation and web scraping by exposing Playwright tools through an HTTP-based MCP server. Users can navigate pages, interact with web elements, capture screenshots, and extract structured content using a persistent Chromium instance.MIT
- FlicenseBqualityDmaintenanceAn MCP server for generic browser automation using Playwright. Enables MCP clients to navigate pages, inspect elements, execute JavaScript, capture screenshots, and monitor console logs and network traffic via a headless Chromium instance.7-
- AlicenseAqualityBmaintenanceEnables MCP clients to automate a real Chrome browser via Playwright, supporting session sharing and tools for navigation, clicking, typing, and more.112MIT
- FlicenseNot gradedqualityBmaintenanceEnables MCP clients to remotely control a headless Chromium browser via Playwright, including navigation, clicking, typing, form filling, screenshots, and network request monitoring, over Streamable HTTP and deployable to Azure Container Apps.-