Playwright Server MCP

Playwright Server MCP

A browser automation server providing Playwright capabilities for controlling web browsers, capturing screenshots, extracting content, and performing complex interactions through an MCP interface.

Category
Visit Server

README

Playwright Server MCP

一个基于Playwright的MCP服务器,提供浏览器自动化能力

<a href="https://glama.ai/mcp/servers/c50bsocgzb"><img width="380" height="200" src="https://glama.ai/mcp/servers/c50bsocgzb/badge" alt="Playwright Server MCP server" /></a>

组件

资源

服务器实现了简单的笔记存储系统:

  • 自定义note://URI方案用于访问单个笔记
  • 每个笔记资源具有名称、描述和text/plain MIME类型

提示

服务器提供单个提示功能:

  • summarize-notes: 创建所有存储笔记的摘要
    • 可选"style"参数控制详细程度(brief/detailed)
    • 生成结合所有当前笔记与样式偏好的提示

工具

服务器实现以下Playwright相关工具:

会话与导航

  • playwright_new_session: 创建新的浏览器会话并打开浏览器窗口

    • 可选url参数(字符串),指定初始访问网址,不填则只打开浏览器
  • playwright_navigate: 导航到指定网址

    • 需要url参数(字符串),如不包含http或https前缀将自动添加https://
    • 如果没有活跃的浏览器会话,会自动创建一个新会话

页面交互与获取内容

  • playwright_screenshot: 对当前页面或特定元素进行截图

    • 需要name参数(字符串),截图文件名称,不需要包含扩展名
    • 可选selector参数(字符串),CSS选择器用于指定要截图的页面元素,不填则截取整个页面
  • playwright_evaluate: 在浏览器控制台中执行JavaScript代码

    • 需要script参数(字符串),需要在浏览器中执行的JavaScript代码
  • playwright_get_text_content: 获取当前页面中所有可见元素的文本内容

    • 无需参数
    • 智能过滤重复内容,只返回有意义的文本
  • playwright_get_html_content: 获取页面中指定元素的HTML内容

    • 需要selector参数(字符串),CSS选择器用于定位需要获取HTML内容的页面元素

高级交互操作

  • playwright_action: 支持丰富的元素选择与交互方式
    • 必需参数:
      • by: 选择元素方式,支持get_by_text、get_by_placeholder、get_by_label、get_by_role等
      • by_value: 选择元素的值
      • action: 操作类型,如fill、click、dblclick、hover、check等
    • 可选参数:
      • value: 操作的值
      • force: 是否强制执行动作
      • delay: 按键之间的延迟(毫秒)
      • 以及更多专用参数,参见代码文档

配置

系统要求

  • Python 3.10+
  • Playwright 1.44+

快速开始

安装

Claude Desktop配置

MacOS: ~/Library/Application\ Support/Claude/claude_desktop_config.json Windows: %APPDATA%/Claude/claude_desktop_config.json

<details> <summary>开发/未发布服务器配置</summary>

"mcpServers": {
  "playwright-server": {
    "command": "uv",
    "args": [
      "--directory",
      "C:\\Users\\xxxxx\\Documents\\project\\python\\mcp\\playwright-server",
      "run",
      "playwright-server"
    ]
  }
}

</details>

<details> <summary>已发布服务器配置</summary>

"mcpServers": {
  "playwright-server": {
    "command": "uvx",
    "args": [
      "playwright-server"
    ]
  }
}

</details>

开发

构建与发布

准备发布包:

  1. 同步依赖并更新锁定文件:
uv sync
  1. 构建包分发:
uv build

这将在dist/目录中创建源代码和wheel分发。

  1. 发布到PyPI:
uv publish

注意: 您需要通过环境变量或命令参数设置PyPI凭据:

  • 令牌: --tokenUV_PUBLISH_TOKEN
  • 或用户名/密码: --username/UV_PUBLISH_USERNAME--password/UV_PUBLISH_PASSWORD

调试

由于MCP服务器通过stdio运行,调试可能具有挑战性。为获得最佳调试体验,我们强烈推荐使用MCP Inspector

您可以通过npm使用以下命令启动MCP Inspector:

npx @modelcontextprotocol/inspector uv --directory C:\Users\xxxxx\Documents\project\python\mcp\playwright-server run playwright-server

启动后,Inspector将显示一个URL,您可以在浏览器中访问该URL开始调试。

使用示例

基本网页访问与截图

# 创建会话并导航到指定网址
await playwright_navigate(url="example.com")

# 截取整个页面
await playwright_screenshot(name="fullpage")

# 截取特定元素
await playwright_screenshot(name="logo", selector=".logo")

高级交互操作

# 点击文本匹配的按钮
await playwright_action(by="get_by_text", by_value="登录", action="click")

# 填充表单字段
await playwright_action(by="get_by_placeholder", by_value="用户名", action="fill", value="test@example.com")

# 检查元素是否可见
await playwright_action(by="get_by_test_id", by_value="submit-button", action="is_visible")

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured