Servidor Mcp Playwright

¿Qué es MCP-Server-Playwright?

MCP-Server-Playwright es un servidor innovador diseñado para la automatización de navegadores utilizando Playwright, una poderosa biblioteca que permite a los desarrolladores automatizar aplicaciones web en varios navegadores. Este proyecto es particularmente útil para pruebas y raspado web, permitiendo a los usuarios simular interacciones de usuario y recopilar datos de manera eficiente.

Características de MCP-Server-Playwright

• Soporte Multinavegador: MCP-Server-Playwright es compatible con múltiples navegadores, incluyendo Chrome, Firefox y Safari, asegurando que tus scripts de automatización puedan ejecutarse sin problemas en diferentes entornos.
• Configuración Sencilla: El servidor está diseñado para una rápida instalación y configuración, haciéndolo accesible para desarrolladores de todos los niveles de habilidad.
• API Robusta: Proporciona una API completa que permite un control detallado sobre las interacciones del navegador, incluyendo navegación, selección de elementos y manejo de eventos.
• Modo Sin Cabeza: Los usuarios pueden ejecutar pruebas en modo sin cabeza, lo cual es ideal para pipelines de CI/CD y entornos donde no hay una interfaz gráfica disponible.
• Documentación Extensa: El proyecto viene con documentación completa, facilitando a los desarrolladores comenzar y utilizar todas las características de manera efectiva.

Cómo Usar MCP-Server-Playwright

1. Instalación: Comienza clonando el repositorio desde GitHub:

   git clone https://github.com/Automata-Labs-team/MCP-Server-Playwright.git
   cd MCP-Server-Playwright
   

2. Dependencias: Instala las dependencias necesarias usando npm o yarn:

   npm install
   

3. Ejecutando el Servidor: Inicia el servidor con el siguiente comando:

   npm start
   

4. Creando Scripts de Automatización: Escribe tus scripts de automatización utilizando la API proporcionada. Aquí hay un ejemplo simple para navegar a una página web:

   const { chromium } = require('playwright');
   
   (async () => {
       const browser = await chromium.launch();
       const page = await browser.newPage();
       await page.goto('https://example.com');
       await browser.close();
   })();
   

5. Pruebas y Depuración: Utiliza las herramientas de depuración integradas para probar tus scripts y asegurarte de que funcionen como se espera.

Preguntas Frecuentes

¿Qué es Playwright?

Playwright es una biblioteca de automatización de código abierto desarrollada por Microsoft que permite a los desarrolladores automatizar aplicaciones web en diferentes navegadores. Soporta características modernas de aplicaciones web y proporciona una API rica para la interacción con el navegador.

¿Puedo usar MCP-Server-Playwright para raspado web?

Sí, MCP-Server-Playwright es muy adecuado para tareas de raspado web. Su capacidad para automatizar acciones del navegador facilita la extracción de datos de páginas web.

¿Es MCP-Server-Playwright gratuito para usar?

¡Absolutamente! MCP-Server-Playwright es de código abierto y está disponible para que cualquiera lo use, modifique y distribuya bajo la licencia MIT.

¿Cómo puedo contribuir al proyecto?

¡Las contribuciones son bienvenidas! Puedes contribuir enviando problemas, solicitudes de características o solicitudes de extracción en el repositorio de GitHub. Por favor, consulta las pautas de contribución en la documentación para más detalles.

¿Dónde puedo encontrar la documentación?

La documentación de MCP-Server-Playwright está disponible en el repositorio. Puedes acceder a ella directamente aquí.

<h1 align="center">MCP Server Playwright</h1> <p align="center"> <a href="https://www.automatalabs.io"><img alt="MCP Playwright" src="https://automatalabs.io/icon.svg" height="250"/></a> </p> <p align="center"> <b>A Model Context Protocol server that provides browser automation capabilities using Playwright</b></br> _{Enable LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment} </p> <p align="center"> <a href="https://www.npmjs.com/package/@automatalabs/mcp-server-playwright"><img alt="NPM Version" src="https://img.shields.io/npm/v/@automatalabs/mcp-server-playwright.svg" height="20"/></a> <a href="https://npmcharts.com/compare/@automatalabs/mcp-server-playwright?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@automatalabs/mcp-server-playwright.svg" height="20"/></a> <a href="https://github.com/Automata-Labs-team/MCP-Server-Playwright/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Automata-Labs-team/MCP-Server-Playwright.svg" height="20"/></a> <a href="https://smithery.ai/server/@automatalabs/mcp-server-playwright"><img alt="Smithery Installs" src="https://smithery.ai/badge/@automatalabs/mcp-server-playwright" height="20"/></a> </p>

<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
• Installation
• Configuration
• Components
  • Tools
  • Resources
• License

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:

1. Check your operating system compatibility (Windows/macOS)
2. Create or update the Claude configuration file
3. 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:

1. Install Playwright browsers (if not already):

   npx playwright install
   

2. Install MCP Server Playwright for Cursor using Smithery:

   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
   

3. 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 Claude in %APPDATA% (usually C:\Users\<YourName>\AppData\Roaming\Claude).
   • Inside that folder, create a file named claude_desktop_config.json with the following content:

   {
     "serverPort": 3456
   }
   

4. 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 npx available 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

1. Console Logs (console://logs)

   • Access browser console output in text format
   • Includes all console messages from the browser

2. 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.