Para hablar del MCP de Playwright, tenemos que empezar por las bases del MCP.

Un agente de Inteligencia Artificial se compone de 6 elementos:

  • Modelo .
  • Herramientas.
  • Conocimiento y Memoria.
  • Audio y habla.
  • Mecanismos de seguridad y control.
  • Orquestación.

La memoria de un agente de IA se refiere a  la capacidad de la IA para almacenar y recordar experiencias pasadas y mejorar la toma de decisiones, la percepción y el rendimiento general. A diferencia de los modelos de IA tradicionales, que procesan cada tarea de forma independiente, los agentes de IA con memoria pueden retener el contexto, reconocer patrones a lo largo del tiempo y adaptarse en función de interacciones pasadas

En un lenguaje sencillo, para entender qué es un MCP, todo inicia con la ”ventana de Contexto” (cuánto de nuestras conversaciones puede guardar). Es una de las cosas más difíciles y costosas porque depende de la memoria y cantidad de chips instalados. ¡Es súper caro!

MCP significa Protocolo de Contexto de Modelo (Model Context Protocol). Quizás ya lo escuchaste como ”Ingeniería de Contexto”. Básicamente, MCP actúa como un puente de comunicación entre los modelos de IA y el mundo exterior, permitiendo que la IA acceda a información actualizada, realice acciones y consulte datos en tiempo real. Esto facilita la creación de sistemas de IA más inteligentes, autónomos y capaces de realizar tareas complejas.

De seguro hablando con cualquier IA ya te ha pasado que si la conversación ha sido larga, te dice que tienes que iniciar una nueva conversación porque ya alcanzó el límite (tamaño) de mensajes.

Iniciar una nueva conversación (si quieres continuar con el hilo anterior) implica que tienes que volver a proveer todo el contexto, o al menos lo básico para poder continuar el hilo.
 

Usando MCP en nuestras pruebas de Software

Cuando estamos haciendo pruebas de Software apoyándonos en la IA, las conversaciones pueden ser bien extendidas si proveemos contexto de los features (y sus requerimientos) que queremos probar, los criterios de aceptación, le pedimos que nos ayude a identificar escenarios de prueba y crear los casos de prueba, y aún más largas si queremos que nos ayude a escribir el código para automatizar esas pruebas.

Entonces podemos ayudarnos con un MCP para proveer todo el contexto antes mencionado.

Ahora, creemos nuestra primera prueba con el MCP de Playwright. Iniciemos este experimento instalando el MCP de Playwright en VS code.
 

Descargando el MCP de Playwright

Empezamos descargando el MCP desde la lista de los MCP disponibles para VSCode. Solo tienes que hacer click en “Install Playwright”.


 
VSCode se encarga del resto. Vas a ver una sub-sección llamada MCP SERVERS – INSTALLED en Extensiones:

 
Si ves Stop Server y Restart Server significa que la instalación se realizó correctamente.
 

Configurando el modo Agente y el Modelo

Ahora abrimos el chat de copilot en VSCode y lo seteamos en modo agente, y elegimos un modelo a usar:

Cabe destacar que estoy usando la versión gratuita de Copliot, pero si tienes un modelo de cuenta de pago, aquí mismo lo puedes configurar.

 

Agregando los prompts que usaremos como Contexto

Ahora vamos a crear un archivo de contexto, lo voy a llamar

generate_tests.prompt.md

El contenido de este archivo es:

---
tools: ['playwright']
mode: 'agent'
---

- You are a playwright test generator.
- You are given a scenario and you need to generate a playwright test for it.
- DO NOT generate test code based on the scenario alone. 
- DO run steps one by one using the tools provided by the Playwright MCP.
- When asked to explore a website:
  1. Navigate to the specified URL
  2. Explore 1 key functionality of the site and when finished close the browser.
  3. Implement a Playwright TypeScript test that uses @playwright/test based on message history using Playwright's best practices including role based locators, auto retrying assertions and with no added timeouts unless necessary as Playwright has built in retries and autowaiting if the correct locators and assertions are used.
- Save generated test file in the tests directory
- Execute the test file and iterate until the test passes
- Include appropriate assertions to verify the expected behavior
- Structure tests properly with descriptive test titles and comments

 
Este prompt lo tomé de Debbie O’Brien y podemos leer que estamos definiendo un rol a la IA, y dando instrucciones específicas del comportamiento que queremos obtener de este agente. Si lo traducimos, sería (pero continuaremos con el ejemplo en inglés, de momento):

- Eres un generador de pruebas de playwright.
- Se te da un escenario y debes generar una prueba de playwright para éste.
- NO generes código de prueba basándose únicamente en el escenario.
- Ejecuta los pasos uno por uno utilizando las herramientas proporcionadas por el MCP de Playwright.
- Cuando te pida que explores un sitio web:

1. Navega a la URL especificada.
2. Explora una funcionalidad clave del sitio y, al terminar, cierra el navegador.
3. Implementa una prueba de TypeScript de Playwright que use @playwright/test basándose en el historial de mensajes y siguiendo las mejores prácticas de Playwright, incluyendo localizadores basados en roles, afirmaciones de reintento automático y sin tiempos de espera adicionales a menos que sea necesario, ya que Playwright incorpora reintentos y espera automática si se utilizan los localizadores y afirmaciones correctos.
- Guarda el archivo de prueba generado en el directorio de pruebas.
- Ejecuta el archivo de prueba e itera hasta que la prueba se complete.
- Incluye assertions (verificaciones) apropiadas para verificar el comportamiento esperado.
- Estructura las pruebas correctamente con títulos y comentarios descriptivos.

 

Agregando el Contexto al chat y corriendo nuestra primera prueba

Ahora, agregamos el archivo que creamos como contexto a nuestra conversación:


 
Luego de eso, estamos listos para pedirle al agente que cree nuestra primera prueba:

 
Usaremos Explore ya que es la única instrucción que hemos escrito hasta ahora en nuestro archivo de contexto:

Explore <https://debs-obrien.github.io/playwright-movies-app>

La web https://debs-obrien.github.io/playwright-movies-app también la tomé de Debbie O’Brien.

Y aquí el resultado:

 
Podemos ver en el chat paso a paso lo que está pasando.

  • Navegó a la URL indicada.
  • Esperó que el MCP server estuviese disponible (falló).
  • Esperó que el MCP server estuviese disponible (con éxito).
  • Hizo “Click”.
  • Cerró el navegador.
  • Creó la carpeta tests.
  • Creó el test popular-movies.spec.ts.
  • Me pidió correr el comando para instalar playwright (detectó que no lo tengo instalado en mi proyecto aún).

Después de instalar playwright, corremos el comando npx playwright test para correr el test. o Dejamos que la IA nos guíe:

 

Conclusión

El MCP nos ayuda a mantener conversaciones orientadas a crear/automatizar casos de prueba separando el contexto del chat.

Podemos agregar tantos archivos de contexto como necesitemos (podemos configurarlos por features, por grupos de pruebas y/o como más le convenga a nuestro proyecto).

Podríamos crear todo un knowledge base de nuestro sistemas y así facilitar el análisis de escenarios de prueba basados en riesgo, la creación de casos y la automatización de los mismos de forma fácil y rápida.

En los próximos posts, vamos a ver más ejemplos en español. Spoiler: funciona tan bien como en inglés.