Mcp 伺服器 Playwright
概覽
什麼是 MCP-Server-Playwright？
MCP-Server-Playwright 是一個創新的伺服器，旨在使用 Playwright 進行瀏覽器自動化，這是一個強大的庫，使開發人員能夠在各種瀏覽器中自動化網頁應用程式。這個項目特別適合測試和網頁抓取，允許用戶模擬用戶互動並高效地收集數據。
MCP-Server-Playwright 的特點
- 跨瀏覽器支持：MCP-Server-Playwright 支持多個瀏覽器，包括 Chrome、Firefox 和 Safari，確保您的自動化腳本可以在不同環境中無縫運行。
- 簡易設置：該伺服器設計為快速安裝和配置，使所有技能水平的開發人員都能輕鬆使用。
- 強大的 API：它提供了全面的 API，允許對瀏覽器互動進行詳細控制，包括導航、元素選擇和事件處理。
- 無頭模式：用戶可以在無頭模式下運行測試，這對於 CI/CD 管道和沒有圖形界面的環境非常理想。
- 廣泛的文檔：該項目附帶詳細的文檔，使開發人員更容易入門並有效利用所有功能。
如何使用 MCP-Server-Playwright
- 安裝：首先從 GitHub 克隆庫：
git clone https://github.com/Automata-Labs-team/MCP-Server-Playwright.git cd MCP-Server-Playwright - 依賴項：使用 npm 或 yarn 安裝必要的依賴項：
npm install - 啟動伺服器：使用以下命令啟動伺服器：
npm start - 創建自動化腳本：使用提供的 API 編寫自動化腳本。這裡是一個簡單的示例，用於導航到一個網頁：
const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await browser.close(); })(); - 測試和調試：利用內置的調試工具測試您的腳本，確保它們按預期執行。
常見問題解答
Playwright 是什麼？
Playwright 是由微軟開發的開源自動化庫，允許開發人員在不同瀏覽器中自動化網頁應用程式。它支持現代網頁應用功能，並提供豐富的瀏覽器互動 API。
我可以使用 MCP-Server-Playwright 進行網頁抓取嗎？
是的，MCP-Server-Playwright 非常適合網頁抓取任務。它自動化瀏覽器操作的能力使得從網頁中提取數據變得容易。
MCP-Server-Playwright 是免費使用的嗎？
當然！MCP-Server-Playwright 是開源的，任何人都可以在 MIT 許可下使用、修改和分發。
我該如何為該項目做貢獻？
歡迎貢獻！您可以通過在 GitHub 倉庫上提交問題、功能請求或拉取請求來貢獻。請參閱文檔中的貢獻指南以獲取更多詳細信息。
我可以在哪裡找到文檔？
MCP-Server-Playwright 的文檔可在倉庫中找到。您可以直接訪問 這裡。
詳細
<a href="https://glama.ai/mcp/servers/9q4zck8po5"><img width="380" height="200" src="https://glama.ai/mcp/servers/9q4zck8po5/badge" alt="MCP-Server-Playwright MCP server" /></a>
Table of Contents
Features
- 🌐 Full browser automation capabilities
- 📸 Screenshot capture of entire pages or specific elements
- 🖱️ Comprehensive web interaction (navigation, clicking, form filling)
- 📊 Console log monitoring
- 🔧 JavaScript execution in browser context
Installation
Installing via Smithery
To install MCP Server Playwright for Claude Desktop automatically via Smithery:
npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude
You can install the package using either npx or mcp-get:
Using npx:
npx @automatalabs/mcp-server-playwright install
This command will:
- Check your operating system compatibility (Windows/macOS)
- Create or update the Claude configuration file
- Configure the Playwright server integration
The configuration file will be automatically created/updated at:
- Windows:
%APPDATA%\Claude\claude_desktop_config.json - macOS:
~/Library/Application Support/Claude/claude_desktop_config.json
Using mcp-get:
npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright
Configuration
The installation process will automatically add the following configuration to your Claude config file:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@automatalabs/mcp-server-playwright"]
}
}
}
Using with Cursor
You can also use MCP Server Playwright with Cursor, an AI-powered code editor. To enable browser automation in Cursor via MCP:
-
Install Playwright browsers (if not already):
npx playwright install -
Install MCP Server Playwright for Cursor using Smithery:
npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor -
Configuration file setup:
If you do not use Claude, the configuration file (claude_desktop_config.json) may not be created automatically.- On Windows, create a folder named
Claudein%APPDATA%(usuallyC:\Users\<YourName>\AppData\Roaming\Claude). - Inside that folder, create a file named
claude_desktop_config.jsonwith the following content:
{ "serverPort": 3456 } - On Windows, create a folder named
-
Follow the remaining steps in the Installation section above to complete the setup.
Now, you can use all the browser automation tools provided by MCP Server Playwright directly from Cursor’s AI features, such as web navigation, screenshot capture, and JavaScript execution.
Note: Make sure you have Node.js installed and
npxavailable in your system PATH.
Components
Tools
browser_navigate
Navigate to any URL in the browser
{
"url": "https://stealthbrowser.cloud"
}
browser_screenshot
Capture screenshots of the entire page or specific elements
{
"name": "screenshot-name", // required
"selector": "#element-id", // optional
"fullPage": true // optional, default: false
}
browser_click
Click elements on the page using CSS selector
{
"selector": "#button-id"
}
browser_click_text
Click elements on the page by their text content
{
"text": "Click me"
}
browser_hover
Hover over elements on the page using CSS selector
{
"selector": "#menu-item"
}
browser_hover_text
Hover over elements on the page by their text content
{
"text": "Hover me"
}
browser_fill
Fill out input fields
{
"selector": "#input-field",
"value": "Hello World"
}
browser_select
Select an option in a SELECT element using CSS selector
{
"selector": "#dropdown",
"value": "option-value"
}
browser_select_text
Select an option in a SELECT element by its text content
{
"text": "Choose me",
"value": "option-value"
}
browser_evaluate
Execute JavaScript in the browser console
{
"script": "document.title"
}
Resources
-
Console Logs (
console://logs)- Access browser console output in text format
- Includes all console messages from the browser
-
Screenshots (
screenshot://<n>)- Access PNG images of captured screenshots
- Referenced by the name specified during capture
License
This project is licensed under the MIT License - see the LICENSE file for details.
伺服器配置
{
"mcpServers": {
"mcp-server-playwright": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"ghcr.io/metorial/mcp-container--automata-labs-team--mcp-server-playwright--mcp-server-playwright",
"node dist/index.js"
],
"env": {}
}
}
}
