在软件开发和自动化测试领域，浏览器自动化一直是一个热门话题。微软最近开源了一个强大的浏览器自动化工具——Playwright-MCP，它通过模型上下文协议（MCP）为LLMs（大型语言模型）提供了与网页交互的能力，无需依赖截图或视觉调整模型。今天，我们就来深入了解一下这个工具，看看它是如何为开发者带来便利的。

Playwright-MCP简介

Playwright-MCP是一个基于Playwright的MCP服务器，它允许LLMs通过结构化可访问性快照与网页交互。这意味着，开发者可以利用LLMs的强大功能来实现复杂的浏览器自动化任务，而无需担心视觉模型的复杂性和不确定性。

关键特性

• 快速轻量：使用Playwright的无障碍树，而非基于像素的输入，大大提高了性能和可靠性。
• LLM友好：完全基于结构化数据运行，无需视觉模型，使得LLMs能够更高效地处理网页内容。
• 确定性工具应用：避免了截图方法常见的歧义，确保了自动化任务的准确性和一致性。

使用场景

Playwright-MCP适用于多种场景，包括但不限于：

• 网页导航和表单填写：自动完成网页导航和表单填写任务，提高工作效率。
• 结构化内容的数据提取：从网页中提取结构化数据，用于数据分析或其他应用。
• 由LLMs驱动的自动化测试：利用LLMs的强大功能，实现更智能的自动化测试。
• 通用浏览器交互代理：作为一个通用的浏览器交互代理，支持多种浏览器操作。

示例配置

以下是一个基本的Playwright-MCP服务器配置示例：

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

安装与使用

VS Code中的安装

您可以通过以下方式在VS Code中安装Playwright-MCP服务器：

• 使用VS Code中的安装按钮。
• 使用VS Code CLI安装：
• 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服务器将可用于与您的GitHub Copilot代理在VS Code中使用。

用户数据目录

Playwright-MCP将使用新配置文件启动Chrome浏览器，配置文件位于以下位置：

• Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
• macOS：~/Library/Caches/ms-playwright/mcp-chrome-profile
• Linux：~/.cache/ms-playwright/mcp-chrome-profile

所有登录信息都将存储在该配置文件中，您可以在会话之间删除它以清除离线状态。

无GUI浏览器（无头浏览器）

对于后台或批量操作，可以运行无GUI的浏览器：

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

在Linux上运行无DISPLAY的浏览器

当在无显示器的系统上运行带头的浏览器时，可以从具有DISPLAY的环境运行MCP服务器，并通过传递--port标志来启用SSE传输：

npx @playwright/mcp@latest --port 8931

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

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

工具模式

Playwright-MCP提供两种模式：

0. 快照模式（默认）：使用无障碍快照以获得更好的性能和可靠性。
1. 视觉模式：使用截图进行基于视觉的交互。

要使用视觉模式，在启动服务器时添加--vision标志：

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

编程使用

您还可以通过编程方式使用Playwright-MCP：

import { createServer } from '@playwright/mcp';
// ...
const server = createServer({ launchOptions: { headless: true } });
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

工具集

Playwright-MCP提供了一套丰富的浏览器自动化工具，包括导航、点击、悬停、拖放、输入文本、选择选项、上传文件、按键操作、捕获快照和截图等。

Playwright-MCP的开源为开发者提供了一个强大的浏览器自动化工具，它不仅轻量级、高性能，还与LLMs无缝集成，极大地简化了自动化任务的实现。无论您是进行自动化测试、数据提取还是其他浏览器自动化任务，Playwright-MCP都值得一试。立即访问Playwright-MCP的GitHub页面，开始探索这个强大的工具吧！您在使用Playwright-MCP时遇到了哪些挑战？欢迎在评论区分享您的经验和见解。