Servidor MCP de Playwright para pruebas de Power Platform

El servidor MCP de Playwright es un servidor Model Context Protocol que proporciona a los asistentes de codificación de IA acceso directo a una sesión de navegador en vivo. En lugar de adivinar selectores de capturas de pantalla o documentación, la inteligencia artificial puede inspeccionar el DOM real, hacer clic en los elementos y observar la navegación; a continuación, generar pruebas precisas de Playwright a partir de lo que encuentra.

¿Por qué usar Playwright MCP para pruebas de Power Platform?

Las aplicaciones de Power Platform presentan desafíos específicos para la creación de pruebas:

• Los controles de lienzo tienen data-control-name atributos específicos de la aplicación y no documentados.
• Los elementos de la galería anidan múltiples elementos localizables, por lo que el selector adecuado depende de la estructura exacta.
• Debe cruzar el límite del iframe (iframe[name="fullscreen-app-host"]) antes de cualquier interacción de control.
• Las vistas respaldadas por Dataverse pueden tardar entre 30 y 60 segundos en rellenarse.

Al utilizar Playwright MCP, el asistente de IA puede:

• Navegue a su aplicación de lienzo o a su aplicación basada en modelos.
• Inspeccione los nombres de control y las etiquetas de ARIA en el DOM representado real.
• Genere selectores que estén correctamente enfocados hacia el iframe.
• Interacciones de tiempo con las esperas adecuadas en función del comportamiento observado.

Instalación del servidor MCP de Playwright

Instale el servidor MCP de Playwright globalmente mediante npm para que el asistente de codificación de IA pueda conectarse a una sesión del explorador en directo.

npm install -g @playwright/mcp

O bien, use npx para ejecutarlo sin una instalación global:

npx @playwright/mcp

Configuración del asistente de IA para usar MCP

Después de instalar el servidor, configure el asistente de codificación de IA para conectarse a él. En las secciones siguientes se muestra la configuración de los editores populares.

VS Code (GitHub Copilot)

Agregue el siguiente código a su .vscode/settings.json o a la configuración del usuario:

{
  "github.copilot.chat.experimental.mcp.servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

Claude (claude.ai o Claude Code)

Cree o actualice CLAUDE.md o .claude/settings.json para incluir el servidor MCP. En Claude Code, agregue el servidor mediante el /mcp comando o editando ~/.claude/settings.json:

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

Cursor/Windsurf

En Cursor, agregue el servidor en Configuración → AI → servidores MCP:

{
  "name": "playwright",
  "command": "npx @playwright/mcp"
}

Conexión de la inteligencia artificial a la aplicación de Power Platform

1. Inicie la aplicación de Power Platform en un explorador (modo de reproducción o creación del portal).

2. Indique al asistente de IA que se conecte al explorador en ejecución:

   "Conéctese al explorador y vaya a https://apps.powerapps.com/play/<your-app-id>"

3. Pida a la inteligencia artificial que inspeccione la aplicación y genere una prueba:

   "Inspeccione la aplicación de lienzo y escriba una prueba de Playwright que abra la galería de pedidos, haga clic en el primer elemento y compruebe el campo del número de pedido".

La inteligencia artificial inspecciona el DOM a través del servidor MCP, identifica los data-control-name valores, anota el límite del iframe y genera localizadores con ámbito, todo ello sin abrir DevTools.

Ejemplo: Generación de una prueba de aplicación de lienzo

Solicite al asistente de IA:

Con el servidor Playwright MCP, conéctate a la aplicación de lienzo que se está ejecutando en <url>. Busque el nombre del control de la galería y el nombre del control de la etiqueta de título. A continuación, escriba una prueba de Playwright que:

1. Espera a que se cargue la galería.
2. Filtra los elementos para buscar uno titulado "Northwind Traders"
3. Hace clic en ese elemento.
4. Comprueba que aparece un panel de detalles"

La inteligencia artificial usa las herramientas , browser_navigatey browser_snapshot del browser_clickservidor MCP y, a continuación, emite código de prueba como:

import { test, expect } from '@playwright/test';
import { AppProvider, AppType, AppLaunchMode, buildCanvasAppUrlFromEnv } from 'power-platform-playwright-toolkit';

test('find and click Northwind Traders in gallery', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'Orders App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: buildCanvasAppUrlFromEnv(),
  });

  const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');

  // Wait for gallery (control name found via MCP inspection)
  await canvasFrame
    .locator('[data-control-name="Gallery1"] [data-control-part="gallery-item"]')
    .first()
    .waitFor({ state: 'visible', timeout: 60000 });

  // Click item by title (control name found via MCP inspection)
  const item = canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .filter({
      has: canvasFrame
        .locator('[data-control-name="Title1"]')
        .getByText('Northwind Traders', { exact: true }),
    });

  await item.click();

  // Verify details panel
  await expect(canvasFrame.locator('[data-control-name="DetailPanel1"]')).toBeVisible();
});

Ejemplo: Generación de una prueba de aplicación controlada por modelos

Preguntar:

Vaya a <model-driven-app-url>. Inspeccione el AG Grid y busque el encabezado de columna para los números de pedido. Escriba una prueba que filtre por "ORD-001", lea la primera celda y compruebe el valor".

La inteligencia artificial navega, inspecciona la estructura de cuadrícula, identifica el nombre del esquema de columna y genera:

await mda.grid.filterByKeyword('ORD-001');
await mda.grid.waitForGridLoad();
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
expect(orderNumber).toContain('ORD-001');

Herramientas de MCP disponibles

El servidor MCP de Playwright expone las siguientes herramientas a los asistentes de IA:

Solución de problemas de conexión de MCP

Pasos siguientes

• creación de pruebas de AI con Copilot
• Instrucciones personalizadas para agentes de IA
• Pruebas de ejemplo

Consulte también

• Servidor MCP dePlaywright en GitHub
• Introducción a las pruebas asistidas por IA
• Probar aplicaciones de lienzo