Playwright MCP Server

Playwright MCP Server

Enables browser automation and web scraping with multi-session management, supporting page navigation, element interaction, network request capture, and content extraction across multiple concurrent browser instances.

Category
访问服务器

README

Playwright MCP Server

基于 Playwright 的 Model Context Protocol (MCP) 服务器,提供浏览器自动化功能。

  • 会话管理:创建和管理多个独立的浏览器会话
  • 并发支持:支持多个并发浏览器会话,自动清理过期会话
  • 浏览器操作:导航、点击、输入等常用操作
  • 灵活配置:支持不同浏览器(Chromium、Firefox、WebKit)和模式(有头/无头)
  • 自动清理:会话超时后自动清理资源

npm 地址:https://www.npmjs.com/package/@leviathangk/playwright-mcp

GitHub 地址:https://github.com/Leviathangk/PlaywrightMCPForCrawler

安装

npm i @leviathangk/playwright-mcp

MCP 配置

在 MCP Server 中添加:

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": [
        "@leviathangk/playwright-mcp@latest",
        "--browser", "chromium",
        "--headless", "false",
        "--session-timeout", "300000",
        "--max-sessions", "10"
      ]
    }
  }
}

配置参数

参数 默认值 说明
--browser chromium 浏览器类型:chromium、firefox、webkit
--headless false 无头模式
--session-timeout 300000 会话超时(毫秒)
--max-sessions 10 最大并发会话数
--executable-path 浏览器可执行路径(可选)

核心工具

浏览器安装

  • browser_install - 安装 Playwright 浏览器(chromium、firefox、webkit)

会话管理

  • browser_create_session - 创建会话
  • browser_close_session - 关闭会话

页面管理(多标签页)

  • browser_get_pages - 获取所有打开的页面列表
  • browser_new_page - 创建新页面(标签页)
  • browser_switch_page - 切换到指定页面
  • browser_close_page - 关闭指定页面

页面操作

  • browser_navigate - 导航到 URL
  • browser_click - 点击元素
  • browser_type - 输入文本
  • browser_scroll - 滚动页面
  • browser_wait_for_element - 等待元素出现
  • browser_execute_script - 执行自定义 JavaScript

页面分析

  • browser_get_page_structure - 获取页面结构
  • browser_find_element_by_text - 根据文本查找元素
  • browser_query_selector - 使用 CSS 选择器查询元素
  • browser_get_page_content - 获取页面内容(HTML/文本/Markdown)
  • browser_get_text_content - 获取元素文本内容
  • browser_screenshot - 截图

网络请求捕获

  • browser_search_requests - 搜索请求(支持正则)
  • browser_get_requests - 获取所有请求
  • browser_get_request_detail - 获取请求详情(含 curl)
  • browser_clear_requests - 清空请求历史

使用示例

基础使用

// 1. 创建会话
const session = await callTool('browser_create_session');

// 2. 导航到页面
await callTool('browser_navigate', {
  sessionId: session.sessionId,
  url: 'https://example.com'
});

// 3. 搜索 API 请求
const results = await callTool('browser_search_requests', {
  sessionId: session.sessionId,
  keyword: 'api/data',
  searchIn: ['url']
});

// 4. 获取请求详情
const detail = await callTool('browser_get_request_detail', {
  sessionId: session.sessionId,
  requestId: results.matches[0].id
});

// 5. 关闭会话
await callTool('browser_close_session', {
  sessionId: session.sessionId
});

多标签页管理

// 获取所有页面
const pages = await callTool('browser_get_pages', {
  sessionId: sessionId
});
console.log(`总共 ${pages.totalPages} 个页面`);
pages.pages.forEach(page => {
  console.log(`${page.index}: ${page.title} ${page.isActive ? '(当前)' : ''}`);
});

// 创建新页面
await callTool('browser_new_page', {
  sessionId: sessionId,
  url: 'https://www.example.com'
});

// 切换到指定页面
await callTool('browser_switch_page', {
  sessionId: sessionId,
  pageIndex: 1
});

// 关闭页面
await callTool('browser_close_page', {
  sessionId: sessionId,
  pageIndex: 2
});

页面分析

// 获取页面结构
const structure = await callTool('browser_get_page_structure', {
  sessionId: sessionId,
  maxElements: 50
});

// 查找元素
const element = await callTool('browser_find_element_by_text', {
  sessionId: sessionId,
  text: '登录'
});

// 点击元素
await callTool('browser_click', {
  sessionId: sessionId,
  selector: element.selector
});

// 获取页面内容
const content = await callTool('browser_get_page_content', {
  sessionId: sessionId,
  format: 'html'
});

// 执行自定义脚本
const result = await callTool('browser_execute_script', {
  sessionId: sessionId,
  script: 'return document.title;'
});

常见浏览器路径

Windows:

  • Chrome: C:\Program Files\Google\Chrome\Application\chrome.exe
  • Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

macOS:

  • Chrome: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  • Edge: /Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge

Linux:

  • Chrome: /usr/bin/google-chrome
  • Chromium: /usr/bin/chromium-browser

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选