Creación de pruebas de IA con Copilot

El generador de código integrado (codegen) de Playwright registra las interacciones del explorador como código de prueba de TypeScript. Compárelo con un asistente de codificación de IA para limpiar la grabación, aplicar convenciones del kit de herramientas de Power Platform Playwright y generar pruebas listas para producción sin escribir selectores a mano.

Funcionamiento del flujo de trabajo

1. Grabar: ejecute playwright codegen en la aplicación de Power Platform. Playwright captura cada clic, relleno y navegación como código de prueba sin procesar.
2. Pegar: coloque el código grabado en el chat de IA junto con los documentos de la API del kit de herramientas o las instrucciones personalizadas.
3. Reescritura: pida a la IA que vuelva a escribir la grabación mediante AppProvider, ModelDrivenAppPage, GridComponenty otras clases del kit de herramientas.
4. Revisión: compruebe si la prueba generada es correcta, ajuste los tiempos de espera y confirme.

Este flujo de trabajo es especialmente útil cuando no está familiarizado con la API del kit de herramientas o cuando trabaja con una aplicación desconocida.

Paso 1: Grabar con Playwright CodeGen

Use la herramienta codegen de Playwright para registrar las interacciones del explorador y generar el código de prueba sin procesar que refinará en pasos posteriores.

Instalación de exploradores Playwright

Antes de grabar, asegúrese de que el explorador Chromium esté instalado para Playwright.

cd packages/e2e-tests
npx playwright install chromium

Ejecuta codegen en tu aplicación

Inicie el generador de código de Playwright apuntando a la URL de su aplicación de Power Platform. Se abre un navegador junto con el Playwright Inspector, que captura cada interacción en forma de TypeScript.

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

Este comando abre un explorador y un Inspector de Playwright en paralelo. Interactuar con la aplicación: haga clic en botones, rellene formularios y navegue. El Inspector registra cada acción como TypeScript.

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

Copia del código generado

Una vez completado, copie el test generado desde Playwright Inspector. Tendrá un aspecto similar al siguiente:

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

Paso 2: Reescritura con IA

Pegue la grabación en el chat de IA. Después, pregunta:

Reescriba esta grabación de Codegen Playwright como una prueba adecuada utilizando el kit de herramientas Power Platform Playwright. Use AppProvider para lanzar la aplicación, delimitar el ámbito del localizador de fotogramas a una variable, agregar las llamadas adecuadas waitFor antes de las interacciones y hacer uso de expect aserciones de @playwright/test.

Si tiene configurado un archivo de instrucciones personalizado , la inteligencia artificial aplica automáticamente las convenciones del proyecto. De lo contrario, comparta el fragmento de código pertinente de canvas-application.md o model-driven-application.md como contexto.

Ejemplo: prueba de lienzo reescrita por IA

En el ejemplo siguiente se muestra cómo la salida de codegen sin procesar se transforma en una prueba limpia y fácil de mantener mediante el kit de herramientas de Power Platform Playwright.

Antes (salida de codegen):

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

Después (reescritura de IA):

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

Paso 3: Uso de codegen en modo encabezado para aplicaciones controladas por modelos

Para las aplicaciones controladas por modelos, registre la navegación de cuadrícula y las interacciones de formulario:

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

Pida a IA que reescriba usando ModelDrivenAppPage :

Reescriba esta grabación de generación de código para usar ModelDrivenAppPage. Reemplace los clics de cuadrícula sin procesar page.locator() por mda.grid.filterByKeyword(), mda.grid.openRecord(), mda.form.getAttribute(), y mda.form.save().

Uso de Copilot Chat de GitHub para la creación de pruebas

En VS Code con GitHub Copilot, puede crear pruebas directamente en el panel de chat sin codegen:

1. Abra el archivo de prueba correspondiente en el editor.

2. Abra Copilot Chat (Ctrl+Shift+I).

3. Preguntar:

   "@workspace Escribir una prueba en tests/northwind/canvas/canvas-app-crud.test.ts que abra la galería, busque el elemento titulado "Northwind Traders", haga clic en él, edite el campo de teléfono y guarde".

Copilot lee el archivo de prueba y las importaciones del kit de herramientas existentes para generar código de prueba contextualmente preciso.

Uso de Claude para conjuntos de pruebas más grandes

Claude (a través de Claude Code o Claude.ai) destaca al generar varias pruebas relacionadas a la vez:

Dada esta estructura de aplicación de lienzo [pegue el contenido de canvas-application.md], genere un conjunto de pruebas completo que cubra: (1) carga de la galería con elementos, (2) resultados de filtros de búsqueda, (3) creación de un nuevo registro, (4) edición de un registro existente, (5) eliminación de un registro.

Claude genera las cinco pruebas en una única respuesta, siguiendo los patrones en tu contexto.

CLI de Playwright para la generación rápida de pruebas

La CLI de Playwright proporciona utilidades adicionales para la administración de pruebas:

# 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

Procedimientos recomendados para pruebas generadas por IA

• Revise siempre los selectores generados: la inteligencia artificial puede crear selectores demasiado frágiles o demasiado amplios. Verifique los valores de data-control-name con el DOM real.
• Comprobar los tiempos de espera: la IA no conoce el tiempo de carga de tu aplicación. Agregue tiempos de espera de 60 segundos para las llamadas de la galería waitFor en aplicaciones respaldadas por Dataverse.
• Usar datos de prueba únicos: las pruebas generadas por IA suelen usar cadenas codificadas de forma dura. Reemplácelos por Date.now() sufijos para evitar conflictos entre ejecuciones de pruebas.
• Valide con expect: las grabaciones de Codegen a menudo carecen de aserciones. Pida a IA que añada llamadas significativas expect después de cada acción.

Pasos siguientes

• Instrucciones personalizadas para agentes de IA
• Servidor MCP de Playwright
• Pruebas de ejemplo

Consulte también

• Documentación de Playwright codegen
• Introducción a las pruebas asistidas por IA
• Guía de pruebas de aplicaciones Canvas