Tester des applications générées par l’IA (Gen UX)

Les applications UX générées par l'IA sont des Power Apps créées via l'expérience en langage naturel dans Power Apps. Ils utilisent le même runtime de canevas que les applications de canevas créées manuellement, ainsi les mêmes étendues iframe et modèles data-control-name s’appliquent. La GenUxPage classe fournit des outils adaptés pour la structure de contrôle générée.

Différences entre les applications Génération UX et les applications canevas

Les applications Gen UX partagent l'environnement d'exécution de canevas et le iframe[name="fullscreen-app-host"] cadre hôte. Les principales différences sont les suivantes :

• Les noms de contrôle sont générés automatiquement (par exemple, Button1, TextInput1) et peuvent changer lorsque vous régénérez l’application.
• L’invite IA pilote la disposition de l’application, de sorte que la structure varie entre les applications.
• La GenUxPage classe expose des helpers qui fonctionnent sur des rôles sémantiques et des étiquettes ARIA plutôt que sur des noms de contrôle, ce qui rend les tests plus résilients à la régénération.

Lancer une application Gen UX

Utilisez la AppProvider classe pour lancer une application Gen UX en mode jeu, en passant une URL directe pour ignorer le portail de création et vous connecter directement au runtime de canvas.

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

const GEN_UX_APP_URL = buildCanvasAppUrlFromEnv();

test.beforeEach(async ({ page, context }) => {
  const app = new AppProvider(page, context);

  await app.launch({
    app: 'My AI App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: GEN_UX_APP_URL,
  });
});

Localisateurs de portée vers le cadre du canevas

Limitez toutes les interactions à l'iframe du canevas :

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

Attendez que l’application se charge

Les applications d’expérience utilisateur gen peuvent prendre 30 à 60 secondes pour charger des données Dataverse. Attendez un élément connu avant d’interagir :

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

Interagir avec les contrôles par étiquette ARIA

Les applications UX génératives créent des contrôles avec des étiquettes (ARIA) dérivées de votre requête. Utilisez des sélecteurs d’étiquette ARIA pour renforcer la résilience :

Remplir une entrée de texte

Ciblez les entrées de texte par leur attribut aria-label, qui correspond au nom d'affichage de la colonne Dataverse, et utilisez la méthode fill() de Playwright pour entrer des valeurs.

await canvasFrame.locator('input[aria-label="Name"]').fill('Contoso Ltd');
await canvasFrame.locator('input[aria-label="Phone"]').fill('555-9000');

Cliquez sur un bouton

Localisez les boutons en combinant le sélecteur role="button" avec le aria-label assigné par l'IA en fonction de votre invite.

await canvasFrame.locator('[role="button"][aria-label="Save"]').click();
await canvasFrame.locator('[role="button"][aria-label="New record"]').click();

Sélectionner dans une liste déroulante

Cliquez sur la liste déroulante pour développer sa liste d’options, puis sélectionnez l’option souhaitée en correspondant à son texte visible.

const dropdown = canvasFrame.locator('[aria-label="Category"]');
await dropdown.click();
await canvasFrame.locator('[role="option"]:has-text("Enterprise")').click();

Utiliser des galeries

Les galeries d’expérience utilisateur gen utilisent les mêmes attributs que les galeries d’applications canevas :

const gallery = canvasFrame.locator('[data-control-part="gallery-item"]');

// Count items
const count = await gallery.count();
expect(count).toBeGreaterThan(0);

// Filter by text content
const item = gallery.filter({ hasText: 'Contoso Ltd' });
await item.waitFor({ state: 'visible', timeout: 30000 });
await item.click();

Exemple de test complet : créer et rechercher un enregistrement

Le test de bout en bout suivant lance une application Gen UX, crée un enregistrement via le formulaire et vérifie qu’il apparaît dans la galerie.

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

const GEN_UX_APP_URL = buildCanvasAppUrlFromEnv();

test('should create a new record and find it in the list', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'My AI App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: GEN_UX_APP_URL,
  });

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

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

  // Click New record
  await canvasFrame.locator('[role="button"][aria-label="New record"]').click();

  // Fill the form
  const accountName = `AI Test ${Date.now()}`;
  await canvasFrame.locator('input[aria-label="Name"]').fill(accountName);
  await canvasFrame.locator('input[aria-label="Phone"]').fill('555-1234');

  // Save
  await canvasFrame.locator('[role="button"][aria-label="Save"]').click();
  await page.waitForTimeout(3000); // allow Dataverse write

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

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

Découvrir les noms de contrôle générés

Les noms des contrôles Gen UX changent lorsque vous régénérez l'application. Pour rechercher les noms de contrôle actuels :

1. Ouvrez l’application en mode lecture dans un navigateur.
2. Ouvrez devTools du navigateur (F12).
3. Utilisez l’inspecteur pour survoler un élément de contrôle.
4. Recherchez data-control-name dans les attributs de l’élément.

Authentication

Les applications d’expérience utilisateur gen utilisent le domaine Power Apps. Utilisez l’état de stockage standard :

import { getStorageStatePath } from 'power-platform-playwright-toolkit';

test.use({
  storageState: getStorageStatePath(process.env.MS_AUTH_EMAIL!),
});

Étapes suivantes

• Exemples de tests
• Vue d’ensemble des tests assistés par l’IA
• Modèle d'objet de page

Voir aussi

• Tester des applications de canevas
• Tester des applications basées sur des modèles
• Vue d’ensemble de l'authentification