# Prueba tu app web en un navegador real

> Repetir los mismos flujos tras cada cambio es lento y los fallos se cuelan.

Esta configuración es para desarrolladores y equipos de QA que vuelven a probar los mismos flujos tras cada cambio. El agente maneja un navegador real con el servidor Playwright MCP de Microsoft, sigue el flujo que describes en lenguaje natural e informa de lo que falla. Al final tienes un informe de aprobado o fallido por flujo e issues en GitHub con pasos para reproducir cada error.

## Pasos

1. **Añade Playwright MCP**: Registra el servidor Playwright MCP en Claude Code o Cursor con el comando npx @playwright/mcp@latest. La primera vez puede pedirte instalar un navegador; sigue el aviso o ejecuta npx playwright install. Pide al agente que abra tu URL de staging y describa la página para comprobar que funciona.
   Consejo: Añade la opción --headless si no necesitas ver el navegador.
2. **Describe el flujo**: Describe el flujo paso a paso en lenguaje natural: la URL, la cuenta de prueba, qué pulsar o escribir y cómo es un resultado correcto. El agente lee la página mediante snapshots de accesibilidad, así que unas etiquetas claras en botones y campos le ayudan a encontrar los elementos. Pídele que marque cada paso como superado o fallido, con el texto del error o una captura cuando algo falle.
   Consejo: Indica el resultado esperado en cada paso; si no, el agente tiene que adivinar qué significa que funcione.
3. **Registra lo que falla**: Conecta el servidor MCP de GitHub con permiso para crear issues en tu repositorio. Pide al agente un issue por cada fallo con los pasos para reproducirlo, el resultado esperado y el real, el navegador y los errores de consola. Revisa cada issue antes de aprobar su creación.
   Consejo: Pide al agente que convierta un flujo que falla a menudo en un test de Playwright para ejecutarlo en CI.

## Prompts para probar

- Abre https://staging.example.com, regístrate con un email de prueba nuevo, confirma que llegas al panel e informa de cada paso.
- Inicia sesión como test-buyer@example.com, añade dos productos al carrito, aplica el código TEST10 y comprueba que el total cambia. Avísame de lo que falle.
- Rellena el formulario de contacto con un email no válido y comprueba que aparece el mensaje de error junto al campo.
- Repite el checkout con una ventana de 375 px de ancho y dime qué se rompe en móvil.
- Por cada fallo, abre un issue en acme/web con los pasos para reproducirlo y los errores de consola.

## Qué necesitas

- Node.js instalado en local
- Claude Code o Cursor
- Entorno de staging y cuentas de prueba
- Acceso al repositorio de GitHub para crear issues

## Límites

- El agente puede malinterpretar páginas complejas o mal etiquetadas y pulsar el elemento equivocado.
- Las pruebas exploratorias son más lentas y menos repetibles que una suite de tests escrita.
- Los CAPTCHA, la verificación en dos pasos y la confirmación por email suelen requerir un apaño manual.

## Notas de seguridad

- Prueba en staging, no en producción.
- Usa cuentas de prueba, nunca credenciales reales.

## Servidores MCP

- [Playwright MCP Server](https://github.com/microsoft/playwright-mcp): browser-control
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Preguntas frecuentes

**¿Sustituye a mi suite de tests de Playwright?**

No. El agente explora flujos a partir de instrucciones en lenguaje natural, algo útil para comprobaciones rápidas y funciones nuevas. Para lo que deba ejecutarse en cada commit, pídele que escriba un test de Playwright y ejecútalo en CI.

**¿Qué navegadores puede usar?**

Playwright MCP usa Chromium por defecto y se puede configurar para Firefox, WebKit o un Chrome o Edge instalado. Elige el navegador en las opciones de línea de comandos del servidor.

**¿Es seguro usarlo en producción?**

Úsalo en staging con cuentas de prueba. El agente pulsa botones y envía formularios de verdad, así que en producción podría hacer pedidos o mandar emails.

**¿Tiene algún coste?**

Playwright y su servidor MCP son gratuitos y de código abierto. Solo pagas el uso de tu host de IA, como Claude Code o Cursor.

## Herramientas

- **[GitHub](https://suiteintent.com/t/github?m=ES)**: Alojamiento de código, incidencias y pull requests. · Ideal para: Equipos que revisan código con pull requests · Plan gratis · 10000