🚀 MCP 服务器 Playwright

MCP 服务器 Playwright 是一个提供浏览器自动化功能的模型上下文协议（Model Context Protocol）服务器，由 Playwright 实现。它能让大语言模型与网页交互、截取屏幕截图以及在真实的浏览器环境中执行 JavaScript。

🚀 快速开始

MCP 服务器 Playwright 是一个基于 Playwright 的工具，用于在浏览器环境中执行自动化操作。它支持多种浏览器功能，包括截取屏幕截图、控制台日志捕获以及与网页元素交互。

安装

使用以下命令安装 MCP 服务器 Playwright：

npm install @automatalabs/mcp-server-playwright

快速入门

const { createServer } = require('@automatalabs/mcp-server-playwright');

async function main() {
  const server = await createServer();
  await server.start();
}

✨ 主要特性

浏览器操作

• 导航：通过 URL 访问网页

  await page.goto('https://example.com');
  

• 截取屏幕截图：捕获当前视图的 PNG 图像

  const screenshot = await page.screenshot();
  

• 控制台日志：获取浏览器控制台输出

  const logs = await page.logs();
  

元素交互

• 点击元素：通过选择器或文本定位并点击元素

  await page.click('#menu-item');
  await page.clickText('Hover me');
  

• 填充表单：向输入框中填写内容

  await page.fill('#input-field', 'Hello World');
  

• 选择下拉选项：通过选择器或文本选择下拉菜单中的选项

  await page.select('#dropdown', 'option-value');
  await page.selectText('#dropdown', 'Choose me');
  

脚本执行

• 执行 JavaScript：在浏览器环境中运行任意脚本

  const title = await page.evaluate('document.title');
  

💻 使用示例

基础用法

const { createServer } = require('@automatalabs/mcp-server-playwright');

async function main() {
  const server = await createServer();
  await server.start();
}

高级用法

const { createServer } = require('@automatalabs/mcp-server-playwright');

async function main() {
  const server = await createServer();
  await server.start();

  // 导航到网页
  await page.goto('https://example.com');

  // 截取屏幕截图
  const screenshot = await page.screenshot({ name: 'homepage' });

  // 填充表单
  await page.fill('#input-field', 'Hello World');
  
  // 提交表单
  await page.click('#submit-button');

  console.log('操作完成');
}

main().catch(console.error);

📚 详细文档

资源访问

1. 截图资源 (screenshot://<n>)：

   • 访问指定名称的 PNG 图像文件
   • 使用截取屏幕截图命令获取

2. 控制台日志资源 (console://logs)：

   • 获取浏览器控制台输出文本
   • 包含所有控制台消息

📄 许可证

本项目遵循 MIT 许可证，具体请参阅 LICENSE 文件。