vitest-midscene-e2e (web-infra-dev)

¿Qué hace vitest-midscene-e2e (web-infra-dev)?

Potencia Vitest con Midscene para realizar pruebas de UI impulsadas por IA en Web (Playwright), Android (ADB) e iOS (WDA). Crea proyectos desde cero, convierte proyectos existentes y genera, actualiza, depura y ejecuta pruebas E2E usando interacciones en lenguaje natural. Disparadores: write test, add test, create test, update test, fix test, debug test, run test, e2e test, midscene test, new project, convert project, init project, 写测试, 加测试, 创建测试, 更新测试, 修复测试, 调试测试, 运行测试, 新建工程, 转化工程.

Características

• Pruebas en Lenguaje Natural: Describe las interacciones de UI en lenguaje natural (por ejemplo, "haz clic en el botón de inicio de sesión") y Midscene se encarga de localizar y actuar sobre los elementos.
• Soporte Multiplataforma: Prueba en Web (Playwright), Android (ADB) e iOS (WDA) con el mismo conjunto de pruebas.
• Inicio Rápido de Proyectos: Crea un nuevo proyecto de pruebas E2E con Vitest y Midscene preconfigurados usando create-midscene.
• Conversión de Proyectos: Convierte un proyecto existente de Vitest para que soporte Midscene sin perder la configuración actual.
• Ciclo de Vida Completo de Pruebas: Crea, añade, actualiza, depura y ejecuta pruebas E2E directamente desde el agente de IA.

Instalación

No se requiere instalación manual. El agente de IA gestiona la configuración automáticamente. Para un nuevo proyecto, ejecuta el comando de inicialización:

# El agente ejecutará esto por ti
npx create-midscene@latest

Para un proyecto existente de Vitest, el agente añadirá @midscene/vitest como dependencia de desarrollo y configurará el archivo vitest.config.ts.

Uso

Nuevo Proyecto

1. Ejecuta el disparador: new project o init project.
2. El agente creará una estructura de proyecto con:
   • vitest.config.ts con la configuración de Midscene.
   • Un archivo de prueba de ejemplo (example.test.ts).
   • Un archivo midscene.config.ts con las opciones de configuración.

Pruebas en un Proyecto Existente

1. Selecciona una prueba o pide: add test o write test.
2. Describe la interacción de UI en lenguaje natural (por ejemplo, "Quiero una prueba que navegue a la página de inicio, busque 'midscene' y verifique que aparezcan resultados").
3. El agente generará el código de la prueba usando los asistentes de Midscene (page.ai, page.aiQuery, page.aiWaitFor).

Depuración y Ejecución

• Depurar: Usa debug test para ejecutar la prueba en modo interactivo (por ejemplo, con --ui de Vitest).
• Ejecutar: Usa run test o e2e test para ejecutar la prueba en modo headless.

Ejemplo de Código Generado

import { describe, it, expect } from 'vitest';
import { getPage } from '@midscene/vitest';

describe('Inicio de sesión', () => {
  it('debería mostrar error con credenciales inválidas', async () => {
    const page = await getPage();
    await page.ai('Navega a https://example.com/login');
    await page.ai('Escribe "usuario_invalido" en el campo de nombre de usuario');
    await page.ai('Escribe "contraseña_incorrecta" en el campo de contraseña');
    await page.ai('Haz clic en el botón "Iniciar sesión"');
    const errorMessage = await page.aiQuery('el mensaje de error');
    expect(errorMessage.text).toContain('Credenciales inválidas');
  });
});

Configuración Adicional

Variables de Entorno

• MIDSCENE_MODEL_NAME: Nombre del modelo de IA a usar (por defecto: gpt-4o).
• MIDSCENE_API_KEY: Clave API para el modelo de IA.
• MIDSCENE_DEVICE: Dispositivo de destino (web, android, ios).

Archivo midscene.config.ts

import { defineConfig } from '@midscene/vitest';

export default defineConfig({
  model: 'gpt-4o',
  apiKey: process.env.MIDSCENE_API_KEY,
});

Solución de Problemas

• La prueba falla en Android/iOS: Asegúrate de que el emulador o dispositivo físico esté conectado y que ADB (para Android) o WDA (para iOS) esté funcionando.
• Midscene no encuentra el elemento: Verifica que el modelo de IA tenga una descripción clara de la acción. Usa page.aiWaitFor para esperar a que un elemento esté visible.
• Problemas de autenticación: Configura la variable de entorno MIDSCENE_API_KEY correctamente.

Más Información

• Repositorio de Midscene
• Documentación de Vitest