Lokales Schreiben, Debuggen und Ausführen von Tests

In diesem Artikel wird die vollständige lokale Entwicklungsschleife behandelt: Schreiben von Tests in Ihrem Editor, Ausführen von Tests für eine Live-Power Platform-Umgebung und Debuggen von Fehlern mithilfe der integrierten Tools von Playwright. Sie erhalten KI-Unterstützung von Claude Code und GitHub Copilot.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die folgenden Tools und Zugriff verfügen.

Node.js 18 oder höher
VS Code (empfohlen) oder ein beliebiger TypeScript-fähiger Editor
Eine Power Platform-Umgebung mit Ihrer bereitgestellten App
Authentifizierung konfiguriert – siehe Authentifizierungshandbuch

Einrichten des Arbeitsbereichs

Führen Sie die folgenden Schritte aus, um das Repository zu klonen, Abhängigkeiten zu installieren und das Projekt in VS Code zu öffnen.

Klonen Sie das Repository:

git clone https://github.com/microsoft/power-platform-playwright-samples.git
cd power-platform-playwright-samples

Installieren von Abhängigkeiten:

node common/scripts/install-run-rush.js install

Installieren Sie die empfohlenen VS-Codeerweiterungen:
- Playwright Test für VS Code (ms-playwright.playwright) – Ausführen und Debuggen von Tests über die Randleiste
- GitHub Copilot (GitHub.copilot) – KI-Testerstellung im Editor
- ESLint (dbaeumer.vscode-eslint) - Inline-Linten

Öffnen Sie den Arbeitsbereich:

code power-platform-playwright-samples.code-workspace

Tests schreiben

In diesem Abschnitt wird erläutert, wo Sie Testdateien ablegen, wie sie strukturiert werden, und wie Sie die Steuerelementnamen finden, die Sie für Selektoren benötigen.

Dateibenennung und Speicherort

Platzieren Sie Testdateien in packages/e2e-tests/tests/. Verwenden Sie das Benennungsmuster <feature>.test.ts.

packages/e2e-tests/
└── tests/
    └── northwind/
        ├── canvas/
        │   └── canvas-app-crud.test.ts
        └── mda/
            ├── model-driven-crud.test.ts
            └── custom-page-crud.test.ts

Grundlegende Teststruktur

Jede Testdatei folgt demselben Muster: Importieren Sie das Toolkit, starten Sie die App in beforeEach, und schreiben Sie einzelne test() Blöcke mit Assertionen.

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

test.describe('Feature name', () => {
  test.beforeEach(async ({ page, context }) => {
    const app = new AppProvider(page, context);
    await app.launch({
      app: 'My App',
      type: AppType.Canvas,
      mode: AppLaunchMode.Play,
      skipMakerPortal: true,
      directUrl: buildCanvasAppUrlFromEnv(),
    });
  });

  test('should do something', async ({ page }) => {
    const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');
    await canvasFrame
      .locator('[data-control-part="gallery-item"]')
      .first()
      .waitFor({ state: 'visible', timeout: 60000 });

    // your assertions here
  });
});

Suchen von Steuerelementnamen in Ihrer Power Apps Canvas-App

Zum Schreiben von Selektoren für Canvas-Steuerelemente benötigen Sie data-control-name-Werte:

Öffnen Sie Ihre App im Wiedergabemodus in einem Browser.
Drücken Sie F12 , um DevTools zu öffnen.
Klicken Sie auf die Registerkarte Inspektor (Elemente).
Zeigen Sie mit der Maus auf ein Steuerelement – das Attribut data-control-name="Button1" wird angezeigt.

Alternativ bitten Sie Claude Code oder GitHub Copilot, das DOM mithilfe des Playwright MCP-Servers zu prüfen.

Tests ausführen

Sie können Tests über die Befehlszeile mit der Playwright CLI ausführen. In den folgenden Unterabschnitten werden allgemeine Optionen angezeigt.

Alle Tests ausführen

Verwenden Sie die folgenden Befehle, um jeden Test im Projekt auszuführen.

cd packages/e2e-tests
npx playwright test

Ausführen einer bestimmten Datei

Übergeben Sie den Dateipfad, um nur die Tests in dieser Datei durchzuführen.

npx playwright test tests/northwind/canvas/canvas-app-crud.test.ts

Ausführen eines bestimmten Tests anhand des Namens

Wird --grep verwendet, um nur Tests auszuführen, deren Name einem Muster entspricht.

npx playwright test --grep "should create an account"

Ausführen eines bestimmten Projekts (Canvas oder MDA)

Verwenden Sie --project, um einen bestimmten App-Typ anzusprechen, der in Ihrer Playwright-Konfiguration definiert ist.

npx playwright test --project=canvas
npx playwright test --project=mda

Ausführen mit der Playwright-Benutzeroberfläche (empfohlen für die lokale Entwicklung)

Die Playwright-UI bietet einen visuellen Testrunner mit Time-Travel-Debugging.

npx playwright test --ui

Verwenden Sie die Benutzeroberfläche, um:

Siehe jeden Test, der mit dem Status "bestanden" oder "fehlgeschlagen" aufgelistet ist.
Klicken Sie auf einen Test, um ihn schritt für Schritt wieder wiedergeben zu können.
Anzeigen von Screenshots, Ablaufverfolgungen und Netzwerkanforderungen in jedem Schritt
Erneutes Ausführen eines einzelnen Tests mit nur einem Klick

Ausführen im Spitzenmodus

Der "Headed-Modus" öffnet ein sichtbares Browserfenster, sodass Sie beobachten können, wie der Test mit der App interagiert.

npx playwright test --headed

Im Modus "Beobachtungsmodus" können Sie den Browser während der Ausführung von Tests verfolgen. Es ist nützlich, zu verstehen, wie die App in jedem Schritt aussieht.

Laufen in Zeitlupe

Zeitlupe fügt zwischen jeder Playwright-Aktion eine Verzögerung hinzu, damit Sie visuell folgen können.

npx playwright test --headed --slow-mo=500

Jede Aktion wird um 500 ms verzögert, sodass Sie die Testausführung leicht visuell verfolgen können.

Debuggen von Tests

Wenn ein Test fehlschlägt, verwenden Sie diese Tools, um die Ausführung zu durchlaufen, das DOM zu überprüfen und Ablaufverfolgungen zu prüfen.

Debuggen mit dem Playwright Inspector

Die Ausführung des Inspector hält an und ermöglicht es Ihnen, Aktionen zu durchlaufen:

npx playwright test --debug

Oder fügen Sie await page.pause() an der Stelle in ihrem Test hinzu, an der Sie brechen möchten.

test('should do something', async ({ page }) => {
  const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');
  await canvasFrame.locator('[data-control-part="gallery-item"]').first()
    .waitFor({ state: 'visible', timeout: 60000 });

  await page.pause(); // <-- execution pauses here; Inspector opens

  await canvasFrame.locator('[data-control-name="MyButton"]').click();
});

Wenn sie angehalten wird, zeigt der Inspektor Folgendes an:

Der aktuelle Locator im Browser hervorgehoben
Ein Tool zum Auswählen von Lokatoren, mit dem Sie auf ein beliebiges Element klicken und dessen Selektor erhalten können
Vorwärts- und Zurück-Steuerelemente

Debuggen in VS-Code

Die Playwright Test-Erweiterung für VS Code fügt eine Test-Sidebar (Bechersymbol) hinzu. Von dort aus können Sie:

Klicken Sie auf die Wiedergabeschaltfläche neben einem beliebigen Test, um ihn auszuführen.
Klicken Sie auf das Fehlersymbol, um es im Debugmodus auszuführen – VS Code-Haltepunkte funktionieren.
Legen Sie einen Haltepunkt in einer beliebigen Testzeile fest, wählen Sie "Debugtest" aus, und der VS-Code hält dort an.

Um den VS Code-Debugger manuell zu konfigurieren, fügen Sie Folgendes hinzu .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Playwright Test",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/playwright",
      "args": ["test", "--project=canvas", "--headed", "--debug"],
      "cwd": "${workspaceFolder}/packages/e2e-tests",
      "console": "integratedTerminal",
      "env": {
        "PWDEBUG": "1"
      }
    }
  ]
}

Lesen des HTML-Berichts

Öffnen Sie nach einer Testausführung den HTML-Bericht:

npx playwright show-report

Der Bericht zeigt Folgendes an:

Status bestanden oder nicht bestanden für jeden Test
Bildschirmfotos bei Fehlern
Vollständige Ablaufverfolgung für jeden Test (sofern trace: 'on-first-retry' festgelegt)

Überwachungs-Viewer lesen

Überwachungen werden als ZIP-Dateien aufgezeichnet, mit denen Sie eine Testausführung Schritt für Schritt wiedergeben können.

npx playwright show-trace test-results/<test-folder>/trace.zip

Oder ziehen Sie die ZIP-Datei auf trace.playwright.dev.

Der Ablaufverfolgungs-Viewer zeigt Folgendes:

Jede Playwright-Aktion mit Timing
DOM-Momentaufnahmen vor und nach jeder Aktion
Netzwerkanforderungen
Konsolenprotokolle und Fehler

Tip

Legen Sie beim Debuggen trace: 'on' in playwright.config.ts fest, um Überwachungen für alle Ausführungen zu erfassen, nicht nur Wiederholungen.

Schreiben und Debuggen mit Claude Code

Claude Code ist ein KI-Codierungsassistent, der in Ihrem Terminal mit vollem Zugriff auf Ihre Projektdateien, Shell und Browser (über den Playwright MCP-Server) ausgeführt wird.

Einrichten von Claude Code für dieses Projekt

Führen Sie diese Schritte aus, um Claude Code zu installieren und mit dem Playwright MCP-Server zu verbinden.

Claude Code installieren:

npm install -g @anthropic-ai/claude-code

Erstellen Sie packages/e2e-tests/CLAUDE.md mit Ihren Projektkonventionen. Siehe benutzerdefinierte Anweisungen für KI-Agents.

Fügen Sie den Playwright MCP-Server zu ~/.claude/settings.json:

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

Starten Sie Claude Code aus dem Stammverzeichnis des Repos:
```
claude
```

Schreiben eines neuen Tests mit Claude Code

Beschreiben Sie in der Claude Code-Sitzung den gewünschten Test:

Schreiben Sie einen Playwright-Test für die Accounts-Canvas-App. Er sollte den Katalog öffnen, auf "Hinzufügen" klicken, den Kontonamen mit einem eindeutigen Wert ausfüllen, speichern und dann überprüfen, ob das neue Element im Katalog angezeigt wird. Setzen Sie es in packages/e2e-tests/tests/accounts/accounts.test.ts."

Claude Code liest Ihre CLAUDE.md Konventionen, schreibt die Testdatei und bestätigt. Überprüfen Sie die Datei vor der Ausführung.

Bitten Sie Claude Code, Ihre App zu prüfen.

Mit dem Playwright MCP-Server verbunden:

"Navigieren Sie zu <your-canvas-app-url>. Überprüfen Sie das DOM innen iframe[name='fullscreen-app-host'], und suchen Sie die data-control-name Werte für die Galerie, die Schaltfläche "Hinzufügen" und das Eingabefeld für Kontonamen. Schreiben Sie dann selektoren für jeden."

Claude Code öffnet einen Browser, navigiert, prüft das DOM und gibt präzise Selektoren zurück.

Beheben eines fehlerhaften Tests mit Claude Code

Fügen Sie die Testausgabe in Claude Code ein:

"Dieser Test ist mit dem folgenden Fehler fehlgeschlagen: [Einfügefehler]. Dies ist die Testdatei: [Einfügen oder Verweisen auf die Datei]. Diagnostizieren Sie das Problem, und beheben Sie es."

Claude Code liest die Datei, versteht den Fehler und schlägt eine Lösung vor – indem er häufig Probleme wie falsche Selektoren, fehlende waitFor oder Datenkonflikte abfängt.

Ausführen von Tests von Claude Code

Claude Code kann Tests direkt ausführen:

Führen Sie npx playwright test tests/accounts/accounts.test.ts --headed aus und sagen Sie mir, ob es bestanden hat.

Claude Code führt den Befehl aus, liest die Ausgabe und meldet Ergebnisse. Wenn der Test fehlschlägt, kann er sofort einen Fix vorschlagen.

Schreiben und Debuggen mit GitHub Copilot

GitHub Copilot integriert sich direkt in VS Code und in JetBrains-IDEs und bietet Inline-Vervollständigungen und ein Chat-Panel an.

Aktivieren von Copilot für dieses Projekt

Führen Sie diese Schritte aus, um Copilot zu aktivieren und projektspezifische Anweisungen zu konfigurieren.

Installieren Sie die Erweiterung GitHub Copilot in VS Code.
Erstellen Sie .github/copilot-instructions.md im Einklang mit Ihren Projektkonventionen – siehe spezifische Anweisungen für KI-Agenten.
Öffnen Sie eine Testdatei – Copilot liest vorhandene Tests und lernt das Muster.

Verwenden Sie Inline-Vervollständigungen

Basierend auf dem Kontext vervollständigt Copilot während der Eingabe den Testcode. Beginnen Sie mit der Eingabe eines test() Blocks, und drücken Sie die TAB-TASTE , um folgendes zu akzeptieren:

test('should filter orders by keyword', async ({ page }) => {
  // Copilot suggests: await mda.grid.filterByKeyword('ORD-001');

Je mehr vorhandene Tests es sehen kann, desto besser sind die Vorschläge.

Verwenden von Copilot Chat zum Generieren von Tests

Öffnen Sie Copilot Chat (Ctrl+Shift+I), und fragen Sie Folgendes:

"@workspace Schreiben eines Tests, der zur modellgesteuerten Orders-App navigiert, filtert das Raster nach "ORD-001", öffnet den ersten Datensatz, aktualisiert das Notizenfeld, speichert und überprüft, ob das Formular nicht mehr schmutzig ist."

Copilot liest Ihre Codebasis über @workspace und generiert einen Test, der Ihrem bestehenden Code-Stil entspricht.

Beheben eines fehlgeschlagenen Tests mit Copilot

Verwenden Sie Copilot Chat, um einen Test zu diagnostizieren und zu beheben, der nicht bestanden wird.

Öffnen Sie die fehlerhafte Testdatei.
Wählen Sie die Fehlerhafte Testfunktion aus.
Öffnen Sie Copilot Chat, und fragen Sie Folgendes:

„Beheben Sie diesen Test. Es kommt zu einem Fehler, weil der Galeriewähler ein Timeout hat. Die Galerie benötigt bis zu 60 Sekunden, um Dataverse-Daten zu laden.

Copilot aktualisiert das Timeout waitFor und schlägt möglicherweise weitere Verbesserungen vor.

Verwenden von Copilot, um einen Fehler zu erklären

Fügen Sie die Fehlermeldung in Copilot Chat ein:

"Erklären Sie diesen Playwright-Fehler und wie Sie ihn im Kontext eines Power Platform Canvas-App-Tests beheben: TimeoutError: locator.waitFor: Timeout 30000ms exceeded"

Copilot erläutert den Fehler und gibt spezifische Hinweise zu Iframe-Bereich und Timeout-Einstellungen für Canvas.

Generieren von Selektoren mit Copilot

Wenn DevTools in Ihrem Browser mit dem Canvas-DOM geöffnet sind, kopieren Sie den relevanten HTML-Code, und bitten Sie Copilot:

„Aufgrund dieses HTML-Codes aus einer Power Apps Canvas-App schreiben Sie den Playwright-Locator, um auf die Schaltfläche „Speichern“ zu klicken, die auf iframe[name='fullscreen-app-host'] festgelegt ist.“

Empfohlener lokaler Entwicklungsworkflow für Playwright-Tests

Dieser End-to-End-Workflow umfasst die typischen Schritte vom anfänglichen Setup bis hin zum Commit ihrer Tests.

Einmal einrichten: Konfigurieren Sie .env, führen Sie auth:headful aus, überprüfen Sie, ob die Beispieltests bestanden werden.
Zuerst prüfen: Öffnen Sie Ihre App, verwenden Sie DevTools oder den Playwright MCP-Server, um Steuerelementnamen zu finden.
Schreiben mit KI: Verwenden Sie Claude Code oder Copilot Chat, um den Test aus einer Beschreibung zu erstellen.
Ausführen mit Benutzeroberfläche:npx playwright test --ui gibt sofortiges visuelles Feedback.
Debuggen mit Inspector:await page.pause() am Fehlerpunkt, um den Zustand live zu prüfen.
Überwachung lesen: Wenn ein Test in CI unstabil ist, öffnen Sie die Überwachungs-ZIP, um genau nachvollziehen zu können, was passiert ist.
Selektives Commit ausführen: Stellen Sie nur die Testdateien bereit – committen Sie niemals .env oder .playwright-ms-auth/.

Behandeln häufig auftretender lokaler Probleme

Verwenden Sie diese Tabelle, um die häufigsten Probleme beim lokalen Ausführen von Tests zu diagnostizieren und zu beheben.

Symptom	Wahrscheinliche Ursache	Reparatur
`Storage state file does not exist`	Auth nie ausgeführt	`npm run auth:headful`
`Authentication tokens have expired`	Sitzung abgelaufen (>1 Stunde)	Erneut ausführen `npm run auth:headful`
`TimeoutError` in der Galerie	Dataverse-Ladezeit	Timeout erhöhen auf `60000`
`Strict mode violation` — N Elemente	Auswahl zu breit	Hinzufügen `.filter()` oder `.first()`
Lokal bestandene Tests, schlägt in CI fehl	Timing oder Umgebungsdifferenz	Fügen Sie `await page.waitForLoadState()` hinzu, überprüfen Sie Wiederholungen.
`ERR_ABORTED` während der modellgesteuerten App-Authentifizierung	Vorheriger Browserprozess noch aktiv	Warten Sie einige Sekunden, und wiederholen Sie den Vorgang. `npm run auth:mda:headful`
VS Code Playwright-Erweiterung findet keine Tests	Falsch `testDir`	Überprüfen `playwright.config.ts` → `testDir: './tests'`