E2E testing con Playwright MCP en Cursor

Contenido del curso

Web App con FastAPI + Docker

Frontend con Next.js y Cursor IDE

iOS con Swift + Cursor IDE

Android + Cursor IDE

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:48

E2E testing con Playwright MCP en Cursor

Curso de Cursor AI Code Editor

Clase 16 de 25

Clase 16 / 25

Recursos

El Model Context Protocol (MCP) es la habilidad que le das a tu agente de Cursor para comunicarse con APIs de terceros y ejecutar tareas reales fuera del editor. Aquí aprendes a configurarlo con Playwright para correr end-to-end testing sobre tu plataforma de cursos y documentar ese proceso con Gherkin, sin escribir código manualmente.

Cómo conectar páginas internas antes de activar el MCP

Antes de meterte con Playwright, conviene revisar la navegación interna de tu app. Si la landing de cursos no enlaza con el detalle del curso, ni el curso con la clase, el flujo de pruebas se rompe.

La forma de resolverlo es pasarle al agente el contexto completo de la página y un ejemplo claro de cómo construir cada enlace. Le compartes la URL de la landing del curso, la URL de una clase y le pides que genere los links desde la página correspondiente.

¿Qué pasa si el agente usa el ID en vez del slug? El enlace falla porque la ruta del curso espera un slug. Le das feedback directo en el chat indicando que la URL funciona con slug y el agente ajusta el código sin que tengas que tocarlo.

El objetivo es que tú no codees: el agente importa el componente Link de Next.js, modifica el archivo correcto (en este caso Course Detail) y deja la navegación lista [01:30].

Qué es el Model Context Protocol y cómo instalarlo en Cursor

Un MCP es un puente entre tu agente y servicios externos. Existen integraciones oficiales y de la comunidad, y la recomendación es revisar siempre quién creó el MCP antes de instalarlo, porque le estás dando acceso a tu proyecto y, en algunos casos, a tu sistema de archivos.

Para este flujo se usa el MCP oficial de Playwright, pensado para automatización de navegador y pruebas de extremo a extremo.

Dónde se configura el MCP en Cursor

La instalación se hace desde la configuración del editor:

Abre File, Preferences, Cursor Settings.
Entra al tab MCP Tools.
Selecciona agregar uno custom.
Pega dentro del objeto MCP Servers la configuración de Playwright que copias del repositorio oficial.
Guarda y cierra.

Cursor ejecuta por detrás un comando npx que levanta el servidor. Si el indicador queda en rojo, apaga y vuelve a prender el MCP para recargar la configuración. Cuando todo está bien, verás el mensaje 31 tools enabled [04:45].

¿Qué son las tools de un MCP? Son funciones específicas que el agente puede invocar. En Playwright incluyen navegar a una URL, leer contenido visible, hacer clic y capturar el DOM, entre otras 31 acciones disponibles.

Cómo correr un end-to-end testing en lenguaje natural

Una vez instalado el MCP, abres un nuevo chat y le pasas un prompt en lenguaje coloquial. Por ejemplo: utilizando el MCP de Playwright, ve a esta URL y accede al curso de React. Luego, ve a la primera clase del curso y dime si puedes ver el reproductor de vídeo.

El agente pide permiso antes de ejecutar cada tool. Vas autorizando paso a paso:

Navegación a la URL inicial.
Lectura del contenido visible para validar que la landing cargó.
Clic sobre el curso de React.
Acceso a la primera clase.
Verificación del reproductor de vídeo.

El resultado esperado es una respuesta como esta: al acceder al curso de React y entrar a la primera clase, se puede ver el reproductor. El HTML contiene un elemento video con controles y una fuente video. Eso confirma que el flujo end-to-end pasa correctamente [07:20].

Cómo documentar pruebas con Gherkin y Cucumber

Que una prueba funcione es solo la mitad del trabajo. La otra mitad es documentarla para poder repetirla sin escribir el prompt completo cada vez.

Aquí entra Cucumber, un framework de documentación de pruebas, y Gherkin, su sintaxis basada en palabras clave en inglés como Feature, Scenario, Given, When y Then. Esta sintaxis describe escenarios en formato legible tanto para humanos como para máquinas.

Cómo pedirle al agente que documente con Gherkin

Le compartes al agente la URL de la documentación oficial de Gherkin y le indicas: quiero que documentes el test utilizando Gherkin y guardes el archivo en source/docs. El agente:

Lee la documentación de referencia.
Traduce el test ejecutado a sintaxis Gherkin.
Crea la carpeta docs dentro de source.
Genera el archivo con el escenario completo.

El archivo resultante describe el Feature (visualizar el reproductor de la primera clase del curso de React), el rol del usuario y el escenario paso a paso: ir a la URL, seleccionar el curso de React y acceder a la primera clase [09:50].

¿Para qué sirve Gherkin si ya tengo el test funcionando? Sirve para reutilizar la prueba. La próxima vez le dices al agente corre estos end-to-end usando el MCP de Playwright apuntando al archivo, y no tienes que volver a escribir el flujo completo.

Reto: invertir el flujo de desarrollo

Ya viste el camino completo: desarrollo, pruebas y documentación. La pregunta interesante es si puedes hacerlo al revés. Documentar primero un escenario en Gherkin y pedirle al agente que escriba el código y genere las pruebas a partir de esa especificación.

Es el espíritu del Behavior Driven Development. Investígalo, pruébalo en tu proyecto y cuéntame en los comentarios cómo te fue.

Daniel Flores

Hace un año

🤖 ¿Qué es el Model Context Protocol (MCP)?

MCP es una funcionalidad avanzada en Cursor que permite:

Conectar tu proyecto a herramientas externas como APIs y motores de prueba.
Ejecutar acciones complejas como pruebas automatizadas e2e usando un protocolo confiable y extensible.

⚠️ Importante: Siempre valida la fuente del MCP que uses (repositorio o creador), ya que puede interactuar con archivos del sistema.

🧪 Integración de Playwright con MCP

Playwright es una herramienta oficial de Microsoft para hacer pruebas end to end (E2E).

📦 Para integrarlo con Cursor:

Copia la configuración del MCP de Playwright desde su repositorio oficial.
Ve a Cursor > Settings > MCP Tools.
Pega y activa el protocolo.
¡Listo! Ahora puedes correr pruebas directamente desde el editor.

🧭 ¿Cómo ejecutar pruebas en lenguaje natural?

Puedes usar instrucciones colocales y simples como:

“🔗 Abre la URL /courses/intro-to-js”
“📺 Verifica que se muestre el reproductor de video”
“🎯 Accede a la clase con ID 3 y valida que aparezca el título y descripción”

➡️ Cursor interpreta esto mediante el MCP y genera acciones automatizadas realistas.

📘 Documentación estructurada con Gherkin

Gherkin es un lenguaje legible por humanos usado en Cucumber para definir pruebas en formato:

Feature: Ver contenido de una clase
  As a student
  I want to view the class content
  So I can learn from the video

  Scenario: Acceder al reproductor
    Given I am on "/class/3"
    When I click on the video player
    Then I should see the video and the class description

📌 Palabras clave:

Feature, Scenario, Given, When, Then
Documentación clara + ejecutable por herramientas de testing

🔁 ¿Y si inviertes el proceso?

✨ Ingeniería inversa con Gherkin:

Primero redactas los escenarios como especificaciones funcionales
Luego el agente genera el código de pruebas automatizadas con base en ese archivo ✅ ¡Ideal para colaboración entre desarrolladores y testers!

✅ Beneficios clave

🔍 Trazabilidad completa entre requisito y prueba
🔁 Posibilidad de reutilizar pruebas con diferentes entradas
📄 Documentación clara para equipos grandes
🤖 Integración perfecta con agentes inteligentes (como Cursor) para ejecutar o generar pruebas automáticamente

Web App con FastAPI + Docker

Vibe coding con Cursor en dos semanas

Stack tecnológico para plataforma educativa online

Configuración de contexto y reglas en Cursor para FastAPI

Setup de FastAPI con Cursor paso a paso

Ejecución autónoma de setup con Cursor

Cursor dentro de un contenedor Docker

Migraciones y modelos ORM con Cursor y Alembic

Creación de servicios y endpoints en FastAPI con Docker

Pruebas unitarias en FastAPI con PyTest

Frontend con Next.js y Cursor IDE

Cursor Agent para front-end sin configuración

Creación y configuración de Cursor Rules para proyectos Next.js

Mejora visual de landing pages con imágenes y tokens CSS

Configuración de estilos globales SCSS y páginas dinámicas en Next.js

Configuración de Vitest para pruebas unitarias en Next.js

Página completa con un solo prompt en Cursor

E2E testing con Playwright MCP en Cursor

iOS con Swift + Cursor IDE

Configuración de Cursor con Xcode para desarrollo iOS nativo

Configura reglas y contexto en Cursor

Genera UI en SwiftUI con prompts en Cursor

Cursor genera capas data y domain en iOS

Conexión de view models con capas domain y data

Android + Cursor IDE

Setup de Cursor para apps Android con Kotlin

Cursor genera una app Android desde cero

Corrección de errores de dependencias con Cursor en Android Studio

Cursor en equipo: entrega frontend en un día

E2E testing con Playwright MCP en Cursor

Progreso del curso

Web App con FastAPI + Docker

Frontend con Next.js y Cursor IDE

iOS con Swift + Cursor IDE

Android + Cursor IDE

Recursos

Recursos