KI-Testverfassung mit Copilot

Der integrierte Codegenerator (Codegen) von Playwright zeichnet Ihre Browserinteraktionen als TypeScript-Testcode auf. Kombinieren Sie es mit einem KI-Codierungsassistenten, um die Aufzeichnung zu bereinigen, Power Platform Playwright Toolkit-Konventionen anzuwenden und produktionsfähige Tests zu erstellen, ohne Selektoren von Hand zu schreiben.

Funktionsweise des Workflows

1. Aufzeichnen: playwright codegen für Ihre Power Platform-App ausführen. Playwright erfasst jeden Klick, jede Füllung und Navigation als unformatierten Testcode.
2. Einfügen: Legen Sie den aufgezeichneten Code zusammen mit den TOOLKIT-API-Dokumenten oder Ihren benutzerdefinierten Anweisungen in Ihren KI-Chat ab.
3. Umschreiben: Bitten Sie die KI, die Aufzeichnung mithilfe von AppProvider, ModelDrivenAppPage, GridComponent und anderen Toolkit-Klassen umzuschreiben.
4. Überprüfung: Überprüfen Sie den generierten Test auf Korrektheit, passen Sie die Timeouts an und führen Sie das Commit aus.

Dieser Workflow ist besonders hilfreich, wenn Sie mit der Toolkit-API noch nicht vertraut sind oder mit einer unbekannten App arbeiten.

Schritt 1: Aufzeichnen mit Playwright-Codegen

Verwenden Sie das Codegentool von Playwright, um Ihre Browserinteraktionen aufzuzeichnen und den rohen Testcode zu generieren, den Sie in späteren Schritten verfeinern.

Installieren von Playwright-Browsern

Stellen Sie vor der Aufzeichnung sicher, dass der Chromium-Browser für Playwright installiert ist.

cd packages/e2e-tests
npx playwright install chromium

Führen Sie Codegen für Ihre App aus

Starten Sie den Codegenerator von Playwright, der auf Ihre Power Platform-App-URL verweist. Dadurch wird ein Browser zusammen mit dem Playwright Inspector geöffnet, der jede Interaktion als TypeScript aufzeichnet.

npx playwright codegen --save-storage=.playwright-ms-auth/state-record.json \
  "https://apps.powerapps.com/play/<your-app-id>"

Mit diesem Befehl wird ein Browser und ein Playwright Inspector nebeneinander geöffnet. Interagieren Sie mit Ihrer App – Klicken Sie auf Schaltflächen, füllen Sie Formulare aus, und navigieren Sie. Der Inspektor zeichnet jede Aktion als TypeScript auf.

npx playwright codegen --load-storage=.playwright-ms-auth/state-<email>.json \
  "https://apps.powerapps.com/play/<your-app-id>"

Kopieren des generierten Codes

Kopieren Sie anschließend den generierten Test aus dem Playwright Inspector. Es sieht ungefähr so aus:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://apps.powerapps.com/play/...');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="icon3"]').click();
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('input[aria-label="Account Name"]').fill('Contoso');
  // ...
});

Schritt 2: Neuschreiben mit KI

Fügen Sie die Aufzeichnung in Ihren KI-Chat ein. Stelle dann die folgende Frage:

"Schreiben Sie diese Playwright-Codegen-Aufzeichnung als ordnungsgemäßen Test mithilfe des Power Platform Playwright-Toolkits um. Verwenden Sie AppProvider, um die App zu starten, legen Sie den Framelocator als Variable fest, fügen Sie geeignete waitFor-Aufrufe vor Interaktionen hinzu und verwenden Sie expect-Assertionen von @playwright/test.

Wenn Sie eine benutzerdefinierte Anleitungsdatei konfiguriert haben, wendet die KI Ihre Projektkonventionen automatisch an. Teilen Sie andernfalls den relevanten Codeausschnitt aus canvas-application.md oder model-driven-application.md als Kontext.

Beispiel: KI-neugeschriebener Canvastest

Das folgende Beispiel zeigt, wie die Rohcodegenausgabe mithilfe des Power Platform Playwright-Toolkits in einen sauberen, wartungsfähigen Test umgewandelt wird.

Vor (Codegenausgabe):

test('test', async ({ page }) => {
  await page.goto('https://apps.powerapps.com/play/<app-id>');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="icon3"]').click();
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('input[aria-label="Account Name"]').fill('Contoso');
  await page.frameLocator('iframe[name="fullscreen-app-host"]')
    .locator('[data-control-name="IconButton_Accept1"] [role="button"]').click();
});

Nach (KI-Neuschreibung):

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

test('should add a new account', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'Accounts App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: buildCanvasAppUrlFromEnv(),
  });

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

  // Wait for app to load
  await canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .first()
    .waitFor({ state: 'visible', timeout: 60000 });

  // Click Add
  await canvasFrame.locator('[data-control-name="icon3"]').click();

  // Fill form
  await canvasFrame.locator('input[aria-label="Account Name"]').fill('Contoso');

  // Save
  await canvasFrame
    .locator('[data-control-name="IconButton_Accept1"] [role="button"]')
    .click();

  // Verify record appears
  const newItem = canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .filter({ hasText: 'Contoso' });

  await expect(newItem).toBeVisible({ timeout: 30000 });
});

Schritt 3: Verwenden von Codegen im Spitzenmodus für modellgesteuerte Apps

Zeichnen Sie für modellgesteuerte Apps die Gitter-Navigation und die Formularinteraktionen auf:

npx playwright codegen --load-storage=.playwright-ms-auth/state-mda-<email>.json \
  "https://<org>.crm.dynamics.com/main.aspx?appid=<app-id>"

Bitten Sie dann die KI, mithilfe von ModelDrivenAppPage umzuschreiben:

Schreiben Sie diese Codegen-Aufzeichnung neu, um ModelDrivenAppPage zu verwenden. Ersetzen Sie unformatierte page.locator()-Rasterklicks durch mda.grid.filterByKeyword(), mda.grid.openRecord(), mda.form.getAttribute() und mda.form.save().

Verwenden von GitHub-Copilot Chat für die Testerstellung

In VS Code mit GitHub Copilot können Sie Tests direkt im Chatbereich ohne Codegen erstellen:

1. Öffnen Sie die relevante Testdatei im Editor.

2. Öffnen Sie Copilot Chat (Ctrl+Shift+I).

3. Fragen:

   @workspace Schreiben Sie einen Test in tests/northwind/canvas/canvas-app-crud.test.ts, der die Galerie öffnet, das Element mit dem Titel 'Northwind Traders' findet, es anklickt, das Telefonfeld bearbeitet und speichert.

Copilot liest Ihre vorhandenen Testdatei- und Toolkitimporte, um kontextgenauen Testcode zu erzeugen.

Verwenden Sie Claude für größere Testsuiten

Claude (via Claude Code oder Claude.ai) ist hervorragend darin, mehrere zusammenhängende Tests gleichzeitig zu generieren.

"Angesichts dieser Canvas-App-Struktur (siehe Inhalt von canvas-application.md) erstellen Sie eine vollständige Testsuite, die Folgendes abdeckt: (1) Galerie lädt mit Elementen, (2) Suchfilter-Ergebnisse, (3) neuen Datensatz erstellen, (4) vorhandenen Datensatz bearbeiten, (5) Datensatz löschen."

Claude generiert alle fünf Tests in einer einzigen Antwort, die den Mustern in Ihrem Kontext folgt.

Playwright CLI für schnelle Testgenerierung

Die Playwright CLI bietet zusätzliche Hilfsprogramme für die Testverwaltung:

# Install
npm install -g @playwright/cli

# Generate test stubs for a URL
playwright-cli generate --url "https://apps.powerapps.com/play/<app-id>"

# List all tests in a project
playwright-cli list

# Show test tree
playwright-cli show-tree packages/e2e-tests

Bewährte Methoden für KI-generierte Tests

• Immer generierte Selektoren überprüfen: KI kann Selektoren erstellen, die zu zerbrechlich oder zu breit sind. Überprüfen Sie data-control-name-Werte mit dem tatsächlichen DOM.
• Überprüfen Sie Timeouts: Künstliche Intelligenz kennt die Ladezeit Ihrer Anwendung nicht. Fügen Sie 60-Sekunden-Timeouts für Galerieaufrufe waitFor von Dataverse-unterstützten Apps hinzu.
• Verwenden Sie eindeutige Testdaten: KI-generierte Tests verwenden häufig hartcodierte Zeichenfolgen. Ersetzen Sie sie durch Date.now() Suffixe, um Konflikte zwischen Testläufen zu vermeiden.
• Überprüfen mit expect: Codegen-Aufzeichnungen fehlen häufig Assertionen. Bitten Sie KI, nach jeder Aktion aussagekräftige expect Aufrufe hinzuzufügen.

Nächste Schritte

• Benutzerdefinierte Anweisungen für KI-Agents
• Playwright MCP-Server
• Beispieltests

Siehe auch

• Playwright Codegen-Dokumentation
• Übersicht über KI-unterstützte Tests
• Leitfaden zum Testen von Canvas-Apps