JinDaGe - Playwright MCP Details

article

README

🚀 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();
}

高级用法

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);

✨ 主要特性

浏览器操作

导航：通过 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');
```

📚 详细文档

资源访问

截图资源 (screenshot://<n>)：
- 访问指定名称的 PNG 图像文件
- 使用截取屏幕截图命令获取
控制台日志资源 (console://logs)：
- 获取浏览器控制台输出文本
- 包含所有控制台消息

📄 许可证

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

Playwright