Pruebas de aplicaciones generadas por IA (UX de generación)

Las aplicaciones de Gen UX son Power Apps generadas por inteligencia artificial creadas a través de la experiencia en lenguaje natural en Power Apps. Usan el mismo entorno de ejecución de lienzo que las aplicaciones de lienzo creadas a mano, por lo que se aplican los mismos patrones data-control-name y el ámbito de iframe. La GenUxPage clase proporciona asistentes optimizados para la estructura de control generada.

Diferencias entre las aplicaciones Gen UX y las aplicaciones de lienzo

Las aplicaciones Gen UX comparten el entorno de ejecución del lienzo y el marco de host iframe[name="fullscreen-app-host"]. Las diferencias principales son:

  • Los nombres de control se generan automáticamente (por ejemplo, Button1, TextInput1) y pueden cambiar al volver a generar la aplicación.
  • El indicador de IA determina el diseño de la aplicación, por lo que la estructura varía entre aplicaciones.
  • La GenUxPage clase expone asistentes que funcionan con roles semánticos y etiquetas de ARIA en lugar de nombres de control, lo que hace que las pruebas sean más resistentes a la regeneración.

Lanzar una aplicación Gen UX

Use la clase AppProvider para iniciar una aplicación Gen UX en modo de reproducción, pasando una dirección URL directa para omitir el Maker Portal y conectarse directamente al entorno de ejecución del lienzo.

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

Tip

Use skipMakerPortal: true con directUrl para omitir Power Apps y reducir el tiempo de inicio en 10–20 segundos.

Localizadores de ámbito al marco del lienzo

Limita todas las interacciones al iframe del lienzo.

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

Espere a que la aplicación se cargue.

Las aplicaciones gen UX pueden tardar entre 30 y 60 segundos en cargar datos de Dataverse. Espere a que un elemento conocido esté disponible antes de interactuar.

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

Interactúa con los controles por etiqueta de ARIA

Las aplicaciones Gen UX generan controles con etiquetas de ARIA derivadas del mensaje. Use selectores de etiquetas ARIA para lograr resistencia:

Rellenar una entrada de texto

Apunta a las entradas de texto según su atributo aria-label, que coincide con el nombre para mostrar de la columna Dataverse, y utiliza el método fill() de Playwright para introducir valores.

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

Haga clic en un botón

Busque botones combinando el selector role="button" con el aria-label que la IA asignó según su solicitud.

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

Seleccionar en una lista desplegable

Haga clic en la lista desplegable para expandir su lista de opciones y, a continuación, seleccione la opción deseada haciendo coincidir su texto visible.

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

Trabajar con galerías

Las galerías Gen UX usan los mismos atributos que las galerías de aplicaciones de lienzo:

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

Ejemplo de prueba completo: creación y búsqueda de un registro

La siguiente prueba extremo a extremo inicia una aplicación Gen UX, crea un nuevo registro a través de un formulario y verifica que aparece en la galería.

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

Descubre nombres de control generados

Los nombres de control de Gen UX cambian cuando vuelves a generar la aplicación. Para buscar nombres de control actuales:

  1. Abra la aplicación en modo de reproducción en un explorador.
  2. Abra el explorador DevTools (F12).
  3. Utiliza el Inspector para pasar el puntero sobre un control.
  4. data-control-name Busque en los atributos del elemento.

Tip

Prefiera aria-label y selectores basados en roles en lugar de data-control-name para aplicaciones de Gen UX. Las etiquetas de ARIA proceden de los nombres visibles de la columna de Dataverse y no cambian al volver a crear la aplicación.

Autenticación

Las aplicaciones Gen UX usan el dominio Power Apps. Use el estado de almacenamiento estándar:

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

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

Pasos siguientes

Consulte también

  • Azken eguneratzearen ordua: