Playwright IA: Midscene.js

Proyecto de automation con Playwright e inteligencia artificial (Midscene).

1. Instala dependencias, ejecuta tests y visualiza el reporte para tener un primer vistazo del modo en que opera Midscene.

2. Configura el MCP Server de Midscene para que automatize lo que le pidas desde un prompt.

Instalacin

Instalar dependencias:

npm install
# o
yarn install

Ejecucin de pruebas

Primero exporta tu API_KEY:

#linux
export OPENAI_API_KEY="tu_api_key"

Ejecuta los tests con Playwright y genera un reporte en HTML:

npx playwright test

Si deseas ver el proceso de ejecucin:

npx playwright test --headed

Abrir el reporte

Para visualizar el reporte generado, usa el comando:

open midscene_run/report/tu_reporte.html

Se abrir automticamente una ventana del navegador con el dashboard de resultados (flujos de MidSceneJS, capturas y trazas).

MidScene: APIs bsicas de operacin de IA

Usa estas APIs en tus steps para que la IA haga el trabajo.

• ai o aiAction Interaccin general con IA
• aiTap Operacin de clic
• aiHover Operacin de hover (pasar el cursor)
• aiInput Operacin de entrada de texto
• aiKeyboardPress Operacin de teclado
• aiScroll Operacin de desplazamiento
• aiQuery Consulta a IA
• aiAssert Asercin de IA
• aiWaitFor Espera basada en IA

Puedes encontrar ms detalles en midscenejs.com/api

MidScene: MCP Server

Permite usar lenguaje natural para automatizar flujos y generar pruebas con Playwright, utilizando el agente de inteligencia artificial MidScene a travs de su MCP Server.

Requisitos

1. Instala Cursor.
2. Abre este proyecto con Cursor.
3. Configura el MCP en Cursor.

Configuracin del MCP en Cursor

1. Abre Cursor
2. Ve a: File > Preferences > Settings
3. Agrega la siguiente configuracin en el apartado MCP:

{
  "mcpServers": {
    "mcp-midscene": {
      "command": "npx",
      "args": ["-y", "@midscene/mcp"],
      "env": {
        "MIDSCENE_MODEL_NAME": "gpt-4o-mini",
        "OPENAI_API_KEY": "<OPENAI_API_KEY>",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000"
      }
    }
  }
}

1. No olvides ingresar tu OPENAI_API_KEY en el json.

Enviar prompt en Cursor

Abre un chat en Cursor (Ctrl + N) y escribe tu prompt. Por ejemplo:

Usa el MCP de Midscene para:
1. Open page https://practicetestautomation.com/practice-test-login/ 
2. Type username incorrectUser into Username field
3. Type password Password123 into Password field
4. Push Submit button
5. Verify error message is displayed
6. Verify error message text is Your username is invalid!

Al finalizar:
Crea el test case en Playwright con midscene, en la carpeta e2e con nombre login, usa de ejemplo @sauce-demo.spec.ts 
Exporta OPENAI_API_KEY que esta en @mcp.json 
Ejecuta el test npx playwright test e2e/login.spec.ts --headed

Nota: En el prompt, brinda contexto (ej: "@mcp.json"). De esta manera, Midscene encuentra la informacin necesaria para cumplir tu solicitud con xito (templates, API_KEYS, etc).