Playwright MCP Explicado: Deja que la IA Escriba tus Tests

Antes de Playwright MCP, los tests generados por IA fallaban en los locators porque la IA imaginaba una estructura del DOM que no coincidía con la aplicación real. Con MCP, la IA abre tu navegador, inspecciona el árbol de accesibilidad real, y genera locators getByRole y getByLabel desde lo que ve en lugar de lo que asume. Este artículo explica cómo funciona Playwright MCP, cómo configurarlo con Claude Desktop, qué puede y qué no puede acceder la IA a través del navegador, y el flujo de trabajo para generar, revisar y refinar tests contra una aplicación en ejecución.

Qué es MCP y por qué importa para el testing

MCP (Model Context Protocol) es un protocolo abierto que permite a los asistentes de IA conectarse a herramientas externas y fuentes de datos. Anthropic lo lanzó en 2024, y el equipo de Playwright agregó soporte oficial de MCP en 2025.

Lo que esto significa en la práctica: cuando usas un asistente de IA conectado por MCP (como Claude en tu IDE), puede abrir un navegador, navegar a tu aplicación, inspeccionar el DOM, y entender qué elementos existen, todo antes de escribir una sola línea de código de test.

Antes de MCP, la generación de tests con IA funcionaba así:

1. Describes tu aplicación en texto

2. La IA genera código basado en la descripción

3. Descubres que los locators están mal porque la IA imaginó una estructura que no coincide con la realidad

4. Corriges los locators manualmente

Con MCP, funciona así:

1. La IA abre tu aplicación en un navegador

2. La IA inspecciona la estructura real del DOM

3. La IA genera código usando roles reales, labels reales, data-testids reales

4. Los locators funcionan en la primera ejecución (generalmente)

La diferencia no es solo comodidad. Es un cambio cualitativo en la calidad del output.

Configurar Playwright MCP

Requisitos previos

Node.js 18 o superior y un cliente de IA compatible con MCP (Claude Desktop, o un IDE con soporte MCP).

Instalación

npm install -g @playwright/mcp

O agrégalo como dependencia del proyecto:

npm install --save-dev @playwright/mcp

Conectar con Claude Desktop

Agrega el servidor MCP a tu configuración de Claude Desktop. Abre el archivo de configuración:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

Reinicia Claude Desktop. Deberías ver una nueva herramienta de Playwright disponible en el menú de herramientas.

Conectar con VS Code

Si usas una extensión de VS Code compatible con MCP (como la extensión de Claude para VS Code), la configuración es similar: agregá el servidor en los ajustes del servidor MCP de la extensión.

Qué ve la IA a través de MCP

Cuando la IA se conecta a través de Playwright MCP, tiene acceso a:

Generar un test con MCP

Así se ve una sesión real de MCP. Abres tu asistente de IA, le pides que escriba un test, y empieza a trabajar:

La IA ve:

• Una barra de navegación con un botón "Login" (rol: button, nombre: "Login")
• Un modal con dos campos de input (label: "Username", label: "Password")
• Un botón de submit (rol: button, nombre: "Submit")
• Después del login: un encabezado con texto "My Travel Items"

La IA genera

import { test, expect } from '@playwright/test';

test('el usuario puede iniciar sesión con credenciales válidas', async ({ page }) => {
  await page.goto('https://lab.becomeqa.com');
  
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill('admin@becomeqa.com');
  await page.getByLabel('Password').fill('testpass123');
  await page.getByRole('button', { name: 'Submit' }).click();
  
  await expect(page.getByRole('heading', { name: 'My Travel Items' })).toBeVisible();
});

Los locators son correctos porque la IA miró la aplicación real, no una descripción de ella. getByRole('button', { name: 'Login' }) funciona porque la IA verificó que ese botón existe con ese nombre accesible exacto.

Ejecutar tests generados por MCP con tu configuración existente

MCP genera tests estándar de Playwright. Se integran con tu suite de tests existente sin ningún cambio:

# Corre igual que cualquier otro test
npx playwright test tests/login.spec.ts

# O correr todos los tests
npx playwright test

Los tests generados usan el mismo playwright.config.ts, los mismos reporters, el mismo pipeline de CI. MCP es una herramienta de generación, no un test runner separado.

Flujo de trabajo práctico: desarrollo de tests asistido por IA

Un flujo de trabajo que funciona bien en la práctica:

Paso 1: Usar MCP para generar el test inicial

Pedile a la IA que escriba un test para un escenario específico. Sé específico sobre qué quieres verificar: no solo "testear el login" sino "verificar que al iniciar sesión con credenciales válidas se muestra el dashboard con el nombre del usuario en la navegación."

Paso 2: Revisar el código generado

Verificá:

• ¿Los locators usan getByRole / getByLabel / getByTestId? (Bien)
• ¿Hay patrones getByXpath o locator('div.alguna-clase')? (Mal: se van a romper)
• ¿Hay llamadas a page.waitForTimeout(2000)? (Mal: usa await expect(...) en su lugar)
• ¿El test tiene aserciones significativas, no solo "la página cargó"?

Paso 3: Ejecutar el test

npx playwright test tests/login.spec.ts --headed

Observalo correr. ¿Coincide con lo que esperabas?

Paso 4: Pedir refinamientos

Si algo está mal, dile a la IA qué pasó. "El test falla en el paso del modal. Parece que el modal tarda un momento en aparecer. ¿Puedes agregar una espera apropiada?" La IA puede volver a la aplicación e inspeccionar qué está pasando.

Paso 5: Agregar casos extremos

Una vez que el test del happy path funciona, pide tests negativos: "Ahora escribí un test para el caso en que la contraseña es incorrecta." MCP le permite a la IA interactuar con la aplicación para ver qué pasa realmente: qué mensaje de error aparece, dónde aparece, cómo está redactado.

Qué genera bien MCP y qué no

Genera bien

• Flujos de happy path con estructura de UI clara
• Interacciones de formulario (fill, select, click)
• Aserciones sobre texto visible y encabezados
• Interacciones con modals y diálogos
• Tests para aplicaciones accesibles con HTML semántico adecuado

Genera menos bien

• Escenarios complejos dependientes del estado ("el usuario tiene exactamente 3 ítems en un estado específico")
• Tests que dependen de setup de datos del backend
• Tests de layout visual (¿está este elemento posicionado correctamente?)
• Race conditions y escenarios sensibles al timing
• Tests que necesitan setup/teardown de base de datos o API

Para la segunda categoría, el código generado por IA te da una estructura inicial que necesita refinamiento manual.

MCP vs. generación de código con IA tradicional

| Aspecto | MCP | Generación basada en prompt |

|---------|-----|-----------------------------|

| Precisión de locators | Alta, desde el DOM real | Variable, desde la descripción |

| Tasa de éxito en primera ejecución | Generalmente funciona | A menudo necesita correcciones |

| Requisito | Acceso al navegador con la app | Solo descripción en texto |

| Útil cuando | La app está corriendo localmente | La app aún no está construida |

Ambos enfoques tienen su lugar. Para testear una aplicación desplegada, MCP es notablemente mejor. Para escribir tests antes de que exista la aplicación (desarrollo dirigido por tests), la generación basada en prompts desde una especificación sigue siendo útil.

Usar MCP en CI

MCP es una herramienta de desarrollo, no de CI. El flujo de trabajo es:

1. Usas MCP localmente para generar e iterar sobre los tests

2. Commiteas los tests generados a tu repositorio

3. CI corre los tests en modo headless usando Playwright estándar

No corrés MCP en CI. Corrés los tests que MCP te ayudó a escribir.

FAQ

Cualquier aplicación web accesible vía navegador. No importa si el frontend es React, Vue, Angular o HTML plano. MCP funciona a nivel del navegador, no del framework.

Experimentalmente, sí. Puedes pedirle a la IA que mire la aplicación actual y corrija un test que está fallando por un cambio de UI. En la práctica, esto funciona bien para actualizaciones de locators pero menos bien para cambios estructurales en el flujo del test.

El paquete @playwright/mcp es open source y gratuito. Necesitás un cliente de IA compatible con MCP. Claude Desktop (Anthropic) tiene niveles gratuito y pago. Otros clientes compatibles varían.

Ambos. Especifica cuál quieres: "Escribí este test en TypeScript con modo estricto" o la IA usará el que coincida con la configuración de tu proyecto existente.

Con la configuración correcta de MCP y el cliente de IA adecuado, sí. Puedes pedirle a la IA que ejecute un test, observe el fallo, inspeccione la aplicación en el estado fallido, y actualice el test. Este es el flujo de trabajo de testing agéntico que está surgiendo en 2026: la IA itera sobre los tests de forma autónoma hasta que pasan.