Playwright

🚀 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 文件。