¿Cómo utilizar playwright-mcp?

Introducción

playwright-mcp (Protocolo de Contexto de Modelo) es una potente herramienta que conecta los asistentes de IA con la automatización de navegadores. Permite que los modelos de IA interactúen con navegadores web, inspeccionen elementos DOM, registren las interacciones del usuario y generen scripts de prueba de Playwright con mayor precisión. Esta guía le guiará en la configuración y el uso eficaz de playwright-mcp.

Herramientas

Herramientas disponibles en la interfaz del navegador:

Caja de herramientas del navegador

1. Seleccionar DOM (🎯): Haz clic para seleccionar y capturar elementos HTML de la página. Úsalo para registrar selectores para tus casos de prueba.
2. Seleccionar imagen (📸): Captura capturas de pantalla de elementos específicos. Útil para pruebas visuales o documentación.
3. Registrar interacciones (📋): Registra las interacciones del navegador, como clics, entradas y navegaciones. Estas interacciones generan selectores automáticamente y pueden pasarse como contexto a clientes MCP como Claude o Cursor para facilitar la creación de casos de prueba.

Comandos MCP

1. init-browser : Inicializa el navegador del dramaturgo.
2. get-context : obtiene el contexto del sitio web, que se utilizará para escribir el caso de prueba
3. execute-code : ejecuta código JS de Playwright personalizado en la página actual
4. get-screenshot : Obtener una captura de pantalla de la página actual
5. get-full-dom : Obtiene el DOM completo de la página actual. (Se recomienda usar get-context )

Más información

¿Quieres profundizar más? Consulta la documentación completa:

📖 Ver documentación