微软Playwright MCP: 大模型与浏览器交互的新方式

Playwright MCP 为大语言模型与浏览器的交互开辟了新的可能性，它通过结构化的方式让 AI 理解和操作网页，克服了基于视觉的方法的局限性。结合 LLM 的自然语言理解能力和 Playwright MCP 的浏览器自动化能力，可以创建更智能的自动化测试，测试脚本可以用自然语言描述，并由 LLM 转换为具体的浏览器操作。对于需要从网页提取结构化数据的场景，Playwright MCP 的快照

学点程序

1600人浏览 · 2025-03-31 08:03:00

学点程序 · 2025-03-31 08:03:00 发布

快速预览

这里演示通过AI客户端操控本地浏览器查看微博热搜

关注公众号，推荐好用的MCP Server：

引言

随着大语言模型（LLM）技术的飞速发展，如何让这些智能模型更自然地与网页进行交互成为了一个重要课题。Microsoft 团队最近推出的 Playwright MCP（Model Context Protocol）就是为解决这一挑战而生的工具，它为 LLM 提供了一种结构化的方式来理解和操作网页内容，无需依赖截图或视觉调优模型。

本文将深入介绍 Playwright MCP 的核心功能、安装配置方法以及应用场景，帮助开发者了解这一创新工具如何改变 AI 与网页的交互方式。

Playwright MCP 是什么？

Playwright MCP 是一个模型上下文协议（Model Context Protocol）服务器，它基于 Microsoft 的 Playwright 自动化测试框架开发，为大语言模型提供浏览器自动化能力。与传统的基于视觉的交互方式不同，它通过结构化的无障碍快照（accessibility snapshots）来让模型理解网页内容，提供了一种更高效、更可靠的网页交互机制。

核心特性

Playwright MCP 具备以下核心功能：

• 无障碍快照：提供网页内容的结构化表示，比截图更有效
• 网页导航：支持 URL 访问、前进后退等基本浏览操作
• 元素交互：点击、悬停、拖放和输入文本等
• 表单操作：填写表单、选择下拉选项、上传文件等
• 键盘操作：支持键盘按键模拟
• 多种输出：可以生成截图、PDF、无障碍快照等

这些特性使得 Playwright MCP 非常适合以下场景：

• 基于 LLM 的网页自动化和测试
• 网页内容的结构化数据提取
• AI 助手执行网页任务
• 自动化表单填写和网页交互

安装与配置

在 VS Code 中安装

Playwright MCP 可以很方便地集成到 VS Code 中。以下是安装方法：

# 在 VS Code 中安装
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

# 在 VS Code Insiders 中安装
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

安装完成后，Playwright MCP 服务器将可以与 VS Code 中的 GitHub Copilot 代理一起使用。

配置示例

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

工作模式

Playwright MCP 提供了两种工作模式：

1. 快照模式（默认）

快照模式利用无障碍快照进行交互，提供更好的性能和可靠性。这种模式下，LLM 能够基于页面的结构化表示进行操作，而不是依赖视觉理解。

快照模式下提供的工具包括：

• browser_navigate：导航到指定 URL
• browser_click：点击页面元素
• browser_type：在可编辑元素中输入文本
• browser_snapshot：捕获页面的无障碍快照
• 等等

2. 视觉模式

视觉模式使用截图进行视觉化交互。要使用视觉模式，需要在启动服务器时添加 --vision 标志：

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

视觉模式最适合能够基于提供的截图在 X-Y 坐标空间中与元素交互的计算机视觉模型。

高级用法

无头浏览器模式

对于后台或批处理操作，可以使用无头浏览器模式（无 GUI）：

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

在没有 DISPLAY 的 Linux 上运行

当在没有显示器的系统或 IDE 的工作进程中运行 Playwright MCP 时，可以使用 SSE 传输：

npx @playwright/mcp@latest --port 8931

然后在 MCP 客户端配置中，设置 url 为 SSE 端点：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

程序化使用与自定义传输

import { createServer } from '@playwright/mcp';

// ...

const server = createServer({
  launchOptions: { headless: true }
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);