Pruebas de ejemplo

El repositorio incluye un conjunto completo de pruebas de ejemplo destinadas a un entorno de Northwind Traders. Estos ejemplos muestran la gama completa de patrones de prueba admitidos por el kit de herramientas y sirven como punto de partida para sus propias pruebas.

Conjuntos de pruebas de ejemplo

Ejecución de los ejemplos

Siga estos pasos para configurar el entorno y ejecutar los conjuntos de pruebas de ejemplo en un entorno de Northwind Traders.

Prerrequisitos

1. Clone el repositorio e instale las dependencias:

   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. Configuración de variables de entorno en 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. Autenticación:

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

Ejecución de todas las pruebas de ejemplo

Para ejecutar todas las pruebas del repositorio, ejecute el siguiente comando desde el packages/e2e-tests directorio :

cd packages/e2e-tests
npx playwright test

Ejecución de un único conjunto de aplicaciones

Puede apuntar a un conjunto de pruebas específico pasando su ruta de acceso de archivo o carpeta al comando playwright test.

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

Ejecutar con la interfaz de usuario de Playwright

Use la marca para iniciar el --ui ejecutor de pruebas interactivo de Playwright, que le permite ver, depurar y volver a ejecutar pruebas visualmente:

npx playwright test --ui

Ejemplo de aplicación canvas para CRUD

La canvas-app-crud.test.ts prueba de aplicación de lienzo prueba de aplicación de lienzo (canvas-app-crud.test.ts) muestra cómo:

• Inicie una aplicación canvas directamente mediante skipMakerPortal: true.
• Espere a que una galería se cargue con un tiempo de espera de 60 segundos.
• Seleccione un elemento de la galería por contenido de texto.
• Rellene un formulario de pedido y guárdelo.
• Compruebe que los cambios aparecen en la galería.

Patrones clave usados:

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

Ejemplo CRUD controlado por modelos

La prueba controlada por modelos (model-driven-crud.test.ts) muestra cómo:

• Inicie una aplicación controlada por modelos mediante directUrl.
• Vaya a una vista de cuadrícula por nombre de entidad.
• Filtre la cuadrícula por palabra clave y valor de columna.
• Leer los valores de celda según el nombre del esquema de la columna.
• Abra un registro y edite un campo.
• Guarde y compruebe en el formulario antes de salir.
• Elimine un registro a través de la barra de comandos.

Patrones clave usados:

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

Ejemplo de CRUD de página personalizada

La prueba de página personalizada (custom-page-crud.test.ts) muestra cómo:

• Inicie una aplicación controlada por modelos y vaya a una página personalizada a través del mapa del sitio.
• Limite todas las interacciones a iframe[name="fullscreen-app-host"].
• Cree un registro en la página del lienzo integrado.
• Actualice la galería; para ello, vaya a la raíz de la aplicación y vuelva a ella.
• Compruebe que aparece el registro recién creado.

Patrones clave usados:

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

Extensión de los ejemplos

Para adaptar los ejemplos a su entorno:

• Reemplazar nombres de entidad : actualice nwind_orders, nwind_ordernumbery nombres de esquema similares para que coincidan con las tablas de Dataverse.
• Reemplazar nombres de control — actualice data-control-name los valores para que coincidan con los controles de la aplicación canvas.
• Reemplacen las direcciones URL de la aplicación: apuntenCANVAS_APP_URL y MODEL_DRIVEN_APP_URL a sus propias aplicaciones.
• Reemplazar nombres de columna — Actualice los nombres de visualización como 'Order Number' en llamadas de getCellValue().

Pasos siguientes

• Introducción a las pruebas asistidas por IA
• Modelo de objetos de página
• Referencia de configuración

Consulte también

• Probar aplicaciones de lienzo
• Probar aplicaciones controladas por modelos
• Prueba de páginas personalizadas
• Guía de autenticación