Beispieltests

Das Repository enthält einen vollständigen Satz von Beispieltests für eine Northwind Traders-Umgebung. Diese Beispiele veranschaulichen die vollständige Palette von Testmustern, die vom Toolkit unterstützt werden, und dienen als Ausgangspunkt für Ihre eigenen Tests.

Beispieltestsammlungen

Beispiele ausführen

Führen Sie die folgenden Schritte aus, um Ihre Umgebung einzurichten und die Beispiel-Testsammlungen gegen eine Northwind Traders-Umgebung auszuführen.

Voraussetzungen

1. Klonen Sie das Repository und installieren Sie Abhängigkeiten:

   git clone https://github.com/microsoft/power-platform-playwright-samples.git
   cd power-platform-playwright-samples
   node common/scripts/install-run-rush.js install
   

2. Konfigurieren von Umgebungsvariablen in packages/e2e-tests/.env:

   MS_AUTH_EMAIL=testuser@contoso.com
   MS_USER_PASSWORD=<password>
   CANVAS_APP_URL=https://apps.powerapps.com/play/<app-id>
   MODEL_DRIVEN_APP_URL=https://<org>.crm.dynamics.com/main.aspx?appid=<app-id>
   CUSTOM_PAGE_NAME=AccountsCustomPage
   

3. Authentifizieren:

   cd packages/e2e-tests
   npm run auth:headful
   npm run auth:mda:headful
   

Ausführen aller Beispieltests

Um jeden Test im Repository auszuführen, führen Sie den folgenden Befehl aus dem packages/e2e-tests Verzeichnis aus:

cd packages/e2e-tests
npx playwright test

Ausführen einer einzelnen Suite

Sie können auf eine bestimmte Testsuite abzielen, indem Sie den Datei- oder Ordnerpfad an den playwright test Befehl übergeben:

npx playwright test tests/northwind/canvas
npx playwright test tests/northwind/mda/model-driven-crud.test.ts

Ausführen mit der Playwright-UI

Verwenden Sie die Kennzeichnung, um den --ui interaktiven Testläufer von Playwright zu starten, mit dem Sie Tests visuell überwachen, debuggen und erneut ausführen können:

npx playwright test --ui

CruD-Beispiel für Canvas-App

Der Canvas-App-Test (canvas-app-crud.test.ts)- Canvas-App-Test (canvas-app-crud.test.ts) veranschaulicht Folgendes:

• Starten Sie eine Canvas-App direkt mithilfe von skipMakerPortal: true.
• Warten Sie, bis ein Katalog mit einem Timeout von 60 Sekunden geladen wird.
• Wählen Sie ein Katalogelement nach Textinhalt aus.
• Füllen Sie ein Bestellformular aus, und speichern Sie es.
• Überprüfen Sie, ob Änderungen im Katalog angezeigt werden.

Verwendete Schlüsselmuster:

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

// Select gallery item by title text
const galleryItem = canvasFrame
  .locator('[data-control-part="gallery-item"]')
  .filter({
    has: canvasFrame
      .locator('[data-control-name="Title1"]')
      .getByText('Order 001', { exact: true }),
  });

Modellgesteuertes CRUD-Beispiel

Der modellgesteuerte Test (model-driven-crud.test.ts) veranschaulicht folgendes:

• Starten Sie eine modellgesteuerte App mithilfe von directUrl.
• Navigieren Sie nach Entitätsnamen zu einer Rasteransicht.
• Filtern Sie das Raster nach Schlüsselwort- und Spaltenwert.
• Zellenwerte anhand des Spaltenschemanamens lesen.
• Öffnen Sie einen Datensatz, und bearbeiten Sie ein Feld.
• Speichern und überprüfen Sie das Formular, bevor Sie wegfahren.
• Löschen Sie einen Datensatz über die Befehlsleiste.

Verwendete Schlüsselmuster:

// Filter and wait for grid
await mda.grid.filterByKeyword('ORD-TEST');
await mda.grid.waitForGridLoad();

// Read cell value and open record
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
await mda.grid.openRecord({ rowNumber: 0 });

// Save form and verify
await mda.form.save();
expect(await mda.form.isDirty()).toBe(false);

Beispiel einer benutzerdefinierten Seiten-CRUD

Der benutzerdefinierte Seitentest (custom-page-crud.test.ts) veranschaulicht folgendes:

• Starten Sie eine modellgesteuerte App, und navigieren Sie über die Sitemap zu einer benutzerdefinierten Seite.
• Beschränken Sie alle Interaktionen auf iframe[name="fullscreen-app-host"].
• Erstellen Sie einen Eintrag auf der eingebetteten Canvas-Seite.
• Aktualisieren Sie die Galerie, indem Sie ins App-Stammverzeichnis und zurück navigieren.
• Überprüfen Sie, ob der neu erstellte Datensatz angezeigt wird.

Verwendete Schlüsselmuster:

// Navigate to custom page via sitemap
const sidebarItem = page.locator(`[role="presentation"][title="${CUSTOM_PAGE_NAME}"]`).first();
await sidebarItem.waitFor({ state: 'visible', timeout: 30000 });
await sidebarItem.click();

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

// Refresh by navigating to app root and back
await page.goto(MODEL_DRIVEN_APP_URL, { waitUntil: 'load', timeout: 60000 });
await sidebarItem.click();

Beispiele erweitern

So passen Sie die Beispiele an Ihre Umgebung an:

• Ersetzen Sie Entitätsnamen – Aktualisieren nwind_orders, nwind_ordernumberund ähnliche Schemanamen, die ihren Dataverse-Tabellen entsprechen.
• Ersetzen Sie Steuerelementnamen – Aktualisieren Sie data-control-name Werte, um ihren Canvas-App-Steuerelementen zu entsprechen.
• Ersetzen Sie App-URLs – Weisen Sie CANVAS_APP_URL und MODEL_DRIVEN_APP_URL auf Ihre eigenen Apps zu.
• Spaltennamen ersetzen – Anzeigenamen wie 'Order Number' in getCellValue() Anrufen aktualisieren.

Nächste Schritte

• Übersicht über KI-unterstützte Tests
• Seitenobjektmodell
• Konfigurationsreferenz

Siehe auch

• Testen von Canvas-Apps
• Testen modellgesteuerter Apps
• Testen benutzerdefinierter Seiten
• Authentifizierungsleitfaden