2,236 lecturas
2,236 lecturas

Playwright MCP Server está aquí: ¡Integrémoslo!

por Bright Data10m2025/06/24
Read on Terminal Reader

Demasiado Largo; Para Leer

Microsoft acaba de lanzar Playwright MCP, que permite a los agentes de IA controlar navegadores web a través de comandos de texto de forma gratuita.Esta guía muestra la integración con Python y OpenAI Agents SDK, al tiempo que también aborda los problemas de bloqueo de navegadores.
featured image - Playwright MCP Server está aquí: ¡Integrémoslo!
Bright Data HackerNoon profile picture
0-item
1-item

En abril de 2025, Microsoft cedió silenciosamentePlaywright MCP, un nuevo servidor que conecta su agente de IA (a través de MCP) directamente a la API del navegador Playwright.

¿Qué significa esto en inglés simple?Your AI agent can now interact with real web pages using nothing but simple text instructions(Y de forma gratuita!) »Clica en esto“””Tome una captura de pantallaTodo sin escribir una sola línea de código de automatización del navegador.

Sí, eso es tan grande quePlaywright MCP has already become one of the most-starred MCP servers on GitHubY sólo está empezando. 🔥

En esta guía paso a paso, verá exactamente lo que este servidor puede hacer, y cómo conectarlo a un flujo de trabajo de IA basado en Python usando el SDK de Agentes de OpenAI.

Por qué todo el mundo habla sobre el servidor MCP de Playwright

Playwright en MCPes un servidor MCP (Model Context Protocol) que da a sus agentes de IA serios superpoderes de automatización de navegadores a través de la API de Playwright.

Playwright en MCP

Detrás de las escenas, en lugar de depender de capturas de pantalla o modelos ajustados a la visión, permite a los LLM interactuar con páginas web utilizandostructured accessibility snapshotsEsto significa interacciones más rápidas, más limpias y mucho más amigables con LLM.

En el mundo deFlujos de trabajo de agente AI y agente RAGDonde el hombre necesitaLeer, declic, yNavegacióncomo un ser humano, ¡este es un cambio total de juego!

Y obtienes esto: aunque Microsoft no lo rodó con mucha fanfare (no flashy keynote, no blog post blitz), esta biblioteca de baja clave ya está sentada en12K+ ⭐ on GitHub... y la escalada.


The impressive GitHub star growth of the Playwright MCP server repository


Porque sólo funciona, y a continuación está lo que lo hace especial:

  • Rápido y ligero: utiliza el árbol de accesibilidad del navegador, no la entrada lenta y basada en píxeles.
  • Diseño LLM-primero: No hay necesidad de modelo de visión. Está construido para interfaces de texto estructuradas.
  • ️ Uso de herramientas deterministas: Sin adivinación, sin ambigüedad, sólo acciones claras y fiables a través de varias herramientas.

Además, viene con un CLI sólido y banderas de personalización útiles para el control del navegador ajustado.

Esta tecnología te permite construir agentes serios que no solo alucinan, sino que realmentede las cosasEn la web.

Cómo usar el servidor MCP de Playwright: Tutorial paso a paso

¿Estás listo para poner en marcha el servidor MCP de Playwright? Sigue los pasos a continuación para conectarlo a tu script de Python utilizando el SDK de Agentes de OpenAI!

Precondiciones

Para seguir este tutorial, asegúrese de que tenga su configuración de desarrollador listo para rodar:

  • Python 3.10+ instalado localmente
  • Node.js instalado y funcionando (la última versión LTS es tu amigo) ️
  • Una clave de API de un proveedor de LLM compatible (el SDK de Agentes de OpenAI lo necesita, y recomendamos Gemini porque es libre de usar)

Paso #1: Configuración y configuración del proyecto

Esta integración Playwright + MCP se basa en lo que cubrimos enMCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IA.Así que si aún no lo has comprobado, hazlo realmente rápido.

MCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IAMCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IA


Waiting for you to read the other tutorial…


Pero si tienes prisa (lo conseguimos),here’s the TL;DR version to get you rolling:

  1. Crear una carpeta de proyecto.
  2. Dentro de él, añade un archivo llamado agent.py y configura un entorno virtual de Python.
  3. Instalar las bibliotecas necesarias con pip instalar openai-agents python-dotenv.
  4. Agregue un archivo .env a su carpeta de proyecto y, en su interior, descargue su clave de API Gemini de esta manera:
GEMINI_API_KEY=<your-gemini-api-key>


¡Ahora está cerrado, cargado y listo para empezar a construir! 💥

Paso #2: Integración con el servidor MCP de Playwright

Obtener el servidor MCP de Playwright y ejecutarlo dentro del SDK de Agentes de OpenAI con el siguiente código:


async with MCPServerStdio(
    name="Playwright MCP server",
    params={
        "command": "npx",
        "args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
    },
) as server:
    # Create and initialize the AI agent with the running MCP server
    agent = await create_mcp_ai_agent(server)

    # Agent request-response cycle...
```python
This chunk of code basically runs the following shell command under the hood:
```bash
npx -y @playwright/mcp@latest --output-dir "./"


En inglés simple? Es girar el servidor MCP de Playwright usando Node.js.--output-dir "./"Bit le dice dónde descargar archivos de exportación como capturas de pantalla y PDF.

El añoNote: Si su agente no necesita exportar ningún archivo, puede saltar el--output-dir¡Es una bandera, es opcional!

Paso #3: El código completo

Aquí está lo que tuagent.pyEste es tu agente de inteligencia artificial abierto completo construido por Open AI Agents SDK, alimentado por Gemini, integrado por Playwright, listo para tomar medidas a través de MCP:


import asyncio
from dotenv import load_dotenv
import os
from agents import (
    Runner,
    Agent,
    OpenAIChatCompletionsModel,
    set_default_openai_client,
    set_tracing_disabled
)
from openai import AsyncOpenAI
from agents.mcp import MCPServerStdio

# Load environment variables from the .env file
load_dotenv()

# Read the required secrets envs from environment variables
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")

async def create_mcp_ai_agent(mcp_server):
    # Initialize Gemini client using its OpenAI-compatible interface
    gemini_client = AsyncOpenAI(
        api_key=GEMINI_API_KEY,
        base_url="https://generativelanguage.googleapis.com/v1beta/openai/"
    )

    # Set the default OpenAI client to Gemini
    set_default_openai_client(gemini_client)
    # Disable tracing to avoid tracing errors being logged in the terminal
    set_tracing_disabled(True)

    # Create an agent configured to use the MCP server and Gemini model
    agent = Agent(
        name="Assistant",
        instructions="You are a helpful assistant",
        model=OpenAIChatCompletionsModel(
            model="gemini-2.0-flash",
            openai_client=gemini_client,
        ),
        mcp_servers=[mcp_server]
    )

    return agent

async def run():
    # Start the Playwright MCP server via npx
    async with MCPServerStdio(
        name="Playwright MCP server",
        params={
            "command": "npx",
            "args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
        },
    ) as server:
        # Create and initialize the AI agent with the running MCP server
        agent = await create_mcp_ai_agent(server)

        # Main REPL loop to process user requests
        while True:
            # Read the user's request
            request = input("Your request -> ")

            # Exit condition
            if request.lower() == "exit":
                print("Exiting the agent...")
                break

            # Run the request through the agent
            output = await Runner.run(agent, input=request)

            # Print the result to the user
            print(f"Output -> \n{output.final_output}\n\n")

if __name__ == "__main__":
    asyncio.run(run())


Boom. Al igual que eso, has construido un agente de IA totalmente funcional en ~75 líneas de Python.think through Gemini and act through Playwright️ ️

Paso #4: Pruebe a su agente de IA impulsado por Playwright

Es hora de probar a su agente corriendo:


python agent.py


Esto es lo que verás en Startup:


The Playwright AI agent asking for a request


Ahora lo golpeo con una prompt como ésta:


Visit hackernoon.com, click on "Trending Stories", wait for the page to fully load, and then export it as a PDF file named "hackernoon-trending-stories.pdf"


¿El resultado ?


The actions performed by the AI agents


yup ,it nailed it!

Pero eso fue rápido, así que vamos a descomponer lo que pasó:

  1. El agente lanza una instancia de Chrome alimentada por Playwright.
  2. Visita hackernoon.com
  3. Haz clic en el enlace de “Trending Stories”. ️
  4. Espera que la página se cargue por completo.
  5. Exporta la página a un archivo PDF llamado hackernoon-trending-stories.pdf, que apareció en la carpeta del proyecto.

Recuerde que el navegadorQuédate abiertoen el fondo en la página final. ¡Eso es perfecto si desea enviar otra prompt y mantener viva la sesión actual!


The Playwright-controlled browser after executing the required tasks


¿No te gusta eso y quieres terminar la sesión y cerrar el navegador?


Now, close the browser.


El agente cerrará el navegador por usted.

Ahora, vea el archivo PDF generadohackernoon-trending-stories.pdfEn la carpeta de tu proyecto, desplaza por ella y verás:


The resulting hackernoon-trending-stories.pdf file


¡Fantástico! aclean, full-page export of Hackernoon’s trending page, enlaces y todo, en formato PDF crisp. Eso es una auténtica automatización de navegador, alimentada por su propio agente de IA.

Y eso, gente, eshow you build an AI agent with Playwright + MCPEsta cosa es seriamente poderosa. deje cocinar.

Las limitaciones ocultas del MCP de Playwright (y cómo superarlas)

¡Qué bonito! podrías estar pensando:


“Bueno, tengo las herramientas... un LLM que puede pensar, un servidor MCP que puede raspar, y Playwright para controlar el navegador.

“Bueno, tengo las herramientas... un LLM que puede pensar, un servidor MCP que puede raspar, y Playwright para controlar el navegador.


Bueno... no tan rápido.

Por supuesto, sólo haytwo core things AI agents need to thrive:

  1. Acceso a datos web en tiempo real (✅ manejado por integraciones MCP capaces de raspar)
  2. La capacidad de interactuar con un navegador (✅ entrar Playwright MCP)

Pero aquí es donde las cosas se hacen interesantes...


Tell me more!


Trate de preguntar a su agente de IA impulsado por Playwright algo como:

Visit g2.com, wait for the page to load, and take a screenshot

¿Y qué sucede? ¡Esto!


Note the G2 verification page


Navega a G2. ✅ Espera. ✅ Toma una captura de pantalla. ✅ Pero hay una captura:the page is blocked behind a verification wall. 😬


Don’t get disappointed like Gru…


Y el agente es incluso lo suficientemente educado como para decirle:


Your request -> Visit g2.com, wait for the page to load, and take a screenshot
Output -> 
Okay, I navigated to g2.com, waited for 5 seconds, took a snapshot of the page, and then took a screenshot. However, the page is showing a verification requirement. I am unable to complete the request.


No, no es un “juego terminado” para nosotros como seres humanos. pero tal vez... esJuego sobrePara eldefault Playwright browser setup.

Entonces, ¿qué pasó mal?Aquí está el tema:Vanilla Chrome!♂️

El navegador Playwright controla fuera de la caja no está diseñado para evitar bloques. Se levanta señales por todo el lugar, como banderas de automatización, configuras extrañas, y así sucesivamente.To the point that most websites—jsut like G2 —instantly know it’s a bot.

¿Cuál es la solución? a.Playwright-compatible infrastructureconstruido para apoyar los flujos de trabajo de agentes enremote browsers that don’t get blockedNosotros estamos hablando:

No se
  • Infinitamente escalable ️
  • Trabajo sin cabeza o con cabeza 👁️ más ›
  • Powered by a proxy network with 100M+ IPs residenciales
  • Diseñado para mezclarse como un usuario real ️ ♂️

¿Qué es esta herramienta mágica?Dile saludos aEl navegador de agentes de datos brillantes— tu pila de navegador escondida, escalable y amigable con la IA:

El navegador de agentes de datos brillantes


Si te estás preguntando cómo conectarlo a tu configuración de MCP de Playwright, es tan simple como pasar un punto final de CDP:


async with MCPServerStdio(
    name="Playwright MCP server",
    params={
        "command": "npx",
        "args": [
            "-y", "@playwright/mcp@latest",
            # other arguments...
            "--cdp-endpoint", "<YOUR_BRIGHT_DATA_AGENT_BROWSER_CDP_URL>"
        ],
    },
) as server:
    # Your agent logic here...


yjust like that,No más bloques! No más bot muros. No más triste Gru memes.

Preparado para crear flujos de trabajo queEn realidad¿Trabajar en la web en vivo?Bright Data’s Agent Browser has your back!

Verla en acción en otra integración aquí:


Pensamientos finales

Ahora sabes cómo sobrecargar cualquier agente de IA construido con el SDK de Agentes de OpenAI, ya sea que se ejecute en GPT, Gemini o cualquier cosa que venga a continuación, conectándolo al servidor MCP de Playwright para el control real del navegador.

También mostramos cómo nivelar aún más superando los bloques de navegador usando Bright Data.Agent Browser, sólo una pieza de la poderosa infraestructura de IAhemos construido para soportar flujos de trabajo de IA en el mundo real a escala.

En Bright Data, nuestra misión es simple: hacer que la IA sea accesible para todos, en cualquier lugar. Así que hasta la próxima vez, mantente curioso, mantente atrevido y continúe construyendo el futuro de la IA.

Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks