Pruebas web con GitHub Copilot y Playwright MCP

Sí, si la sesión dispone de una herramienta autorizada. El navegador integrado de VS Code ofrece sus propias herramientas. También puedes registrar un servidor Playwright MCP separado. El agente de GitHub.com se ejecuta en otro entorno y su MCP de Playwright predeterminado usa el localhost de allí. Empieza por el cliente, la URL y una comprobación concreta: verificar OFF, pulsar Enable demo y leer ON. Herramientas de navegador de VS Code MCP en GitHub

Un desarrollador contó en Reddit que Copilot no consiguió abrir el navegador para una prueba. Sin saber qué cliente usaba ni qué herramientas tenía activadas, cuesta reproducir el fallo. Si ya depuras la aplicación en VS Code, empieza por el navegador integrado. Añade el MCP de Microsoft cuando necesites sus herramientas de Playwright. Debate sobre pruebas

Puntos clave

• El navegador integrado de VS Code puede abrir páginas y actuar sobre ellas.

• En VS Code, declara Playwright MCP en .vscode/mcp.json, dentro de servers.

• Copilot CLI tiene su propia configuración. Usa /mcp add en una sesión interactiva.

• El Playwright MCP predeterminado de GitHub solo accede al localhost del entorno de la tarea en la nube.

• La prueba pasa cuando la página muestra el resultado esperado tras la acción.

Identifica el entorno

Si GitHub.com devuelve un error de conexión rechazada, confirma que la aplicación escucha dentro de la tarea en la nube. Algunas sesiones remotas de la ventana Agents de VS Code permiten pasar el tráfico por el host remoto. Comprueba el host que usa el navegador antes de cambiar el puerto. Referencia de la nube Red del navegador integrado

Consulta otro ejemplo de acceso a localhost desde un agente en la nube.

Prueba primero el navegador integrado de VS Code

Inicia la aplicación y abre su URL en el navegador integrado. En Chat, inicia una sesión local de agente y comprueba que las herramientas del navegador estén activadas. Si faltan, revisa workbench.browser.enableChatTools y la política de tu organización. Pide al agente que abra esa misma URL y lea un encabezado visible. Guía del navegador de VS Code

Cuando el agente pueda leer la página, pídele que pulse un control y compruebe el resultado. Si necesitas repetir la comprobación en cada pull request, guarda una prueba de Playwright en el repositorio.

Registra Playwright MCP en el proyecto de VS Code

Usa Node.js 18 o posterior. El ejemplo fija una versión para que el equipo use la misma. Incorpora la entrada a .vscode/mcp.json, ejecuta MCP: List Servers y arranca playwright desde su menú. Si no aparecen las herramientas, revisa la salida. VS Code reenvía los servidores compatibles a las sesiones de Copilot. Para una entrada que pide datos interactivos, consulta los formatos de configuración admitidos.

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--isolated"]
    }
  }
}

Comprueba que la sesión puede seleccionar navegación e instantáneas. La confianza del espacio, las reglas de la organización y la selección del agente pueden afectar al resultado. Usa un perfil aislado para la prueba. Si necesitas una sesión autenticada, verifica el permiso, la cuenta y el nombre visible del espacio. Configuración MCP de VS Code Repositorio Playwright MCP Conectar un navegador existente

Si ya configuraste Playwright MCP para otro agente de código, puedes reutilizar el comando y sus argumentos. Declara el servidor con el formato de VS Code.

Configura la terminal y la nube por separado

En una sesión interactiva de Copilot CLI, ejecuta /mcp add y elige un servidor STDIO local. Introduce el comando y los argumentos del ejemplo de VS Code. Guarda y revisa el servidor con /mcp show playwright. La configuración de usuario va en ~/.copilot/mcp-config.json, bajo mcpServers. El proyecto puede tener un archivo portable .mcp.json y, si se repite el nombre, prevalece su configuración. Configuración de Copilot CLI

En una tarea de GitHub.com, inicia la aplicación dentro de la tarea y usa el puerto de ese entorno. Pide al agente que compruebe el proceso y el encabezado antes de hacer clic. Un usuario de Reddit recibió un error que decía que el navegador ya estaba en uso. Si te ocurre, guarda el mensaje exacto y los datos de la tarea antes de reintentar. Reporte del agente en la nube

Verifica un cambio visible

Usa una página propia con un identificador visible y una acción inocua. Lee el estado inicial, haz clic y vuelve a leer en la misma página. Una captura puede complementar el registro.

Guarda este HTML como copilot-fixture.html en una carpeta que sirva tu aplicación de prueba. Abre la URL y recárgala antes de cada intento. El botón y el identificador siguen visibles tras el clic. Si necesitas otra comprobación, adapta la plantilla de instrucciones para el agente.

<!doctype html>
<meta charset="utf-8">
<title>Copilot test fixture</title>
<h1>COPILOT-DEMO</h1>
<p>Status: <output id="status">OFF</output></p>
<button type="button" id="enable">Enable demo</button>
<script>
  document.getElementById("enable").addEventListener("click", () => {
    document.getElementById("status").textContent = "ON";
  });
</script>

Usa el navegador para abrir la URL autorizada que termina en copilot-fixture.html. Confirma el ID COPILOT-DEMO y el estado OFF. Pulsa Enable demo una sola vez. Vuelve a leer el ID y el estado, que debe ser ON. Indica la URL, la herramienta, el control y los valores observados. Detente si no coincide la URL, el ID o el estado inicial.

El tutorial de GitHub reproduce un error en una aplicación mayor y verifica la corrección. Para la primera conexión, un control y una comprobación bastan. Tutorial de GitHub Primera tarea web Automatización de Playwright

Localiza el primer paso que falla

Si el servidor se cierra al arrancar, comprueba el comando, la versión de Node y el alcance de la configuración en el registro. Si arranca pero el agente no ofrece herramientas, abre el selector de esa sesión y revisa la confianza del proyecto y la política de la organización. Consulta la guía de MCP conectado sin herramientas.

Si la conexión a la página se rechaza, comprueba la URL y el puerto desde el entorno del navegador. Si el clic se atasca, verifica que el control esté visible, habilitado y se identifique sin ambigüedad. Indica su nombre accesible y el resultado esperado. La guía de clics fallidos explica cómo detectar controles tapados.

Para una prueba rápida local, usa el navegador integrado. Añade Playwright MCP al proyecto si el equipo comparte esa configuración. En terminal o en la nube, revisa el host y las herramientas desde la sesión que hará el trabajo. Comprueba un cambio visible antes de ampliar la prueba.

Secholar.L

Crecimiento y contenido en Tabbit

Secholar.L escribe guías prácticas sobre navegadores con IA y flujos de trabajo con agentes, comparando herramientas con investigación real y fuentes verificables.