Playwright MCP-Server für Power Platform-Tests

Der Playwright MCP-Server ist ein Model Context Protocol-Server , der KI-Codierungsassistenten direkten Zugriff auf eine Live-Browsersitzung gewährt. Anstatt Selektoren aus Screenshots oder Dokumentationen zu erraten, kann die KI das echte DOM untersuchen, auf Elemente klicken und die Navigation beobachten – dann generieren Sie präzise Playwright-Tests aus dem gefundenen Element.

Gründe für die Verwendung von Playwright MCP für Power Platform-Tests

Power Platform-Apps stellen spezifische Herausforderungen für die Testerstellung dar:

• Canvas-Steuerelemente verfügen über data-control-name Attribute, die appspezifisch und nicht dokumentiert sind.
• Galerieelemente verschachteln mehrere auffindbare Elemente, sodass die richtige Auswahl von der genauen Struktur abhängt.
• Sie müssen die iframe-Grenze (iframe[name="fullscreen-app-host"]) vor jeder Steuerelementinteraktion überschreiten.
• Dataverse-gestützte Ansichten können 30 bis 60 Sekunden dauern, bis sie befüllt sind.

Mit Playwright MCP kann der KI-Assistent:

• Navigieren Sie zu Ihrer Canvas- oder modellgesteuerten App.
• Überprüfen Sie Steuerelementnamen und ARIA-Bezeichnungen auf dem tatsächlich gerenderten DOM.
• Generieren Sie Selektoren, die korrekt auf den iframe abgegrenzt sind.
• Zeitinteraktionen mit geeigneten Wartezeiten basierend auf dem beobachteten Verhalten.

Installieren des Playwright MCP-Servers

Installieren Sie den Playwright MCP-Server global mithilfe von npm, damit Ihr KI-Codierungs-Assistent eine Verbindung mit einer Live-Browsersitzung herstellen kann.

npm install -g @playwright/mcp

Verwenden Sie npx, um es ohne globale Installation auszuführen:

npx @playwright/mcp

Konfigurieren Ihres KI-Assistenten für die Verwendung von MCP

Konfigurieren Sie nach der Installation des Servers Ihren KI-Codierungs-Assistenten, um eine Verbindung mit dem Server herzustellen. In den folgenden Abschnitten wird das Setup für beliebte Editoren gezeigt.

VS-Code (GitHub Copilot)

Fügen Sie den folgenden Code zu Ihrem .vscode/settings.json oder den Benutzereinstellungen hinzu.

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

Claude (claude.ai oder Claude Code)

Erstellen oder aktualisieren Sie Ihre CLAUDE.md oder .claude/settings.json, um den MCP-Server einzuschließen. Fügen Sie in Claude Code den Server über den /mcp Befehl oder durch Bearbeiten ~/.claude/settings.jsonhinzu:

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

Cursor / Windsurfen

Fügen Sie im Cursor den Server unter "Einstellungen" → AI → MCP-Server hinzu:

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

Verbinden der KI mit Ihrer Power Platform-App

1. Starten Sie Ihre Power Platform-App in einem Browser (Wiedergabemodus oder Erstellen eines Portals).

2. Weisen Sie Ihren KI-Assistenten an, eine Verbindung mit dem laufenden Browser herzustellen:

   "Stellen Sie eine Verbindung mit dem Browser her, und navigieren Sie zu https://apps.powerapps.com/play/<your-app-id>"

3. Bitten Sie die KI, die App zu prüfen und einen Test zu generieren:

   "Überprüfen Sie die Canvas-App, und schreiben Sie einen Playwright-Test, der den Katalog "Bestellungen" öffnet, auf das erste Element klickt, und überprüft das Feld "Bestellnummer".

Die KI prüft das DOM über den MCP-Server, identifiziert die data-control-name Werte, notiert die iframe-Grenze und generiert bereichsbezogene Locators – alles, ohne DevTools zu öffnen.

Beispiel: Generieren eines Canvas-App-Tests

Fordern Sie Ihren KI-Assistenten auf:

Stellen Sie mit dem Playwright MCP-Server eine Verbindung zur aktuell laufenden Canvas-App bei <url> her. Suchen Sie den Namen des Galerie-Steuerelements und das Titelbezeichnungssteuerelement. Schreiben Sie als Nächstes einen Playwright-Test, der:

1. Wartet auf das Laden der Galerie.
2. Filtert Elemente mit dem Titel "Northwind Traders" heraus.
3. Klickt auf dieses Element.
4. Überprüft, ob ein Detailbereich angezeigt wird"

Die KI verwendet die Werkzeuge des MCP-Servers browser_navigate, browser_snapshot und browser_click und gibt dann Testcode wie folgt aus:

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();
});

Beispiel: Generieren eines modellgesteuerten App-Tests

Eingabeaufforderung:

"Navigieren Sie zu <model-driven-app-url>. Überprüfen Sie das AG Grid und suchen Sie die Spaltenüberschrift für Bestellnummern. Schreiben Sie einen Test, der nach 'ORD-001' filtert, die erste Zelle liest und den Wert überprüft."

Die KI navigiert, prüft die Rasterstruktur, identifiziert den Spaltenschemanamen und generiert Folgendes:

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

Verfügbare MCP-Tools

Der Playwright MCP-Server macht die folgenden Tools für KI-Assistenten verfügbar:

Beheben von MCP-Verbindungsproblemen

Nächste Schritte

• AI-Testerstellung mit Copilot
• Benutzerdefinierte Anweisungen für KI-Agents
• Beispieltests

Siehe auch

• Playwright MCP-Server auf GitHub
• Übersicht über KI-unterstützte Tests
• Testen von Canvas-Apps