Resumen Técnico: Pruebas de GUI Basadas en Modelos Asistidas por LLM para Aplicaciones Web Vue.js

1. Planteamiento del Problema

Vue.js se ha convertido en un marco de trabajo dominante para el desarrollo web moderno, caracterizado por su arquitectura de componentes reactivos y su enrutamiento en el lado del cliente. Sin embargo, garantizar la fiabilidad de las aplicaciones de gran escala de Vue.js (SPAs) mediante pruebas automatizadas presenta desafíos únicos. Aunque las Pruebas Basadas en Modelos (MBT) han automatizado con éxito las pruebas de Interfaz Gráfica de Usuario (GUI) en otras plataformas utilizando Grafos de Transición de Páginas (PTGs), su aplicación a Vue.js sigue siendo difícil debido a tres complejidades específicas del framework:

1. Lógica de Navegación Distribuida: La intención de navegación está fragmentada entre configuraciones de router, Componentes de Archivo Único (SFCs), componentes de diseño compartidos y estructuras de enrutamiento anidadas, lo que dificulta la construcción de un modelo unificado.
2. Encapsulación por Librerías de UI: Las acciones de navegación suelen estar encapsuladas dentro de componentes de UI de terceros (por ejemplo, Element UI/Plus), lo que oscurece los elementos cliqueables subyacentes y las APIs de enrutamiento.
3. Navegación Condicional en Tiempo de Ejecución: Los menús y las transiciones están frecuentemente protegidos por condiciones de ejecución mutuamente excluyentes (por ejemplo, roles de usuario, estados de autenticación). El análisis estático suele fallar al distinguir entre estas ramas condicionales, lo que genera transiciones confladas que no son ejecutables en estados específicos (por ejemplo, intentar hacer clic en un elemento de menú visible solo para administradores mientras se está conectado como un usuario estándar).

Los enfoques existentes tienen dificultades para recuperar un modelo de navegación ejecutable y trans-componente a partir del código fuente de Vue.js sin omitir transiciones válidas (baja exhaustividad/recall) o generar rutas no ejecutables (baja precisión).

2. Metodología: El Framework LLMVue

Para abordar estos desafíos, los autores proponen LLMVue, un framework de tres etapas que genera un PTG de nivel de fuente y trans-componente a partir del código fuente de Vue.js para guiar la MBT. El framework utiliza un Modelo de Lenguaje de Gran Escala (LLM), específicamente GPT-4o, para refinar los resultados del análisis estático.

Etapa I: Extracción de Grafo Estático (Alta Exhaustividad/Recall)

El proceso comienza con un análisis estático conservador del código fuente de Vue.js (configuraciones de router y SFCs) utilizando Árboles de Sintaxis Abstracta (ASTs).

• Objetivo: Maximizar la exhaustividad capturando todos los candidatos plausibles de transición de ruta a ruta, incluso si son imprecisos o ambiguos.
• Mecanismo: El sistema analiza las tablas de router para redirecciones explícitas y extrae widgets de navegación (por ejemplo, router-link, elementos de menú) y llamadas de navegación basadas en scripts (por ejemplo, $router.push).
• Salida: Un PTG candidato inicial, potencialmente ruidoso ($G_1$), donde los selectores son marcadores de posición genéricos (por ejemplo, basados en etiquetas o clases) y las condiciones aún no se han resuelto por completo.

Etapa II: Refinamiento Semántico Basado en LLM

Esta etapa aprovecha un LLM para enriquecer las aristas candidatas sin eliminar ninguna, preservando la alta exhaustividad establecida en la Etapa I.

• Mejora de Selectores: El LLM convierte los marcadores de posición genéricos en localizadores de Playwright ejecutables añadiendo restricciones de texto (por ejemplo, :has-text(...)) y normalizando los nombres de clases específicos del framework (por ejemplo, gestionando las diferencias entre Element UI y Element Plus).
• Extracción de Condiciones: El LLM extrae condiciones de visibilidad y habilitación (por ejemplo, directivas v-if, lógica de script) y etiqueta las aristas con metadatos (por ejemplo, CROSS_ROLE para ramas mutuamente excluyentes).
• Validación: El proceso incluye mecanismos de reintento iterativos con reflection prompting para asegurar que la salida cumpla con el esquema de la arista y la validez de la tabla de rutas. Si la validación falla tras los reintentos, se conservan las aristas originales de la Etapa I para evitar la pérdida de datos.

Etapa III: Normalización del Grafo

La etapa final aplica filtrado determinista y deduplicación para producir el PTG ejecutable ($G_3$).

• Eliminación de Redundancias: Se eliminan las aristas estructurales (relaciones padre-hijo en la tabla de router) y los artefactos de redirección global.
• Deduplicación: Los selectores redundantes se consolidan. El sistema prioriza selectores específicos sobre los genéricos y gestiona los prefijos de submenú para asegurar rutas accionables distintas.
• Filtrado: Las aristas entre grupos derivadas de ramas condicionales mutuamente excluyentes se filtran basándose en etiquetas de rama, y se eliminan los bucles de auto-referencia espurios, excepto para pasos necesarios de expansión de la UI.

El PTG resultante es utilizado por un motor de pruebas (usando Playwright) para seleccionar y ejecutar sistemáticamente las aristas salientes desde el nodo de la ruta actual hasta que se agota un presupuesto de tiempo o de acciones.

3. Contribuciones Clave

El artículo realiza las siguientes contribuciones específicas:

1. Framework LLMVue: Un framework de extremo a extremo para construir PTGs de nivel de fuente para aplicaciones Vue.js, permitiendo directamente las pruebas de GUI basadas en modelos.
2. Refinamiento de Aristas Asistido por LLM: Una técnica novedosa que transforma los candidatos estáticos centrados en la exhaustividad en aristas ejecutables mediante la síntesis de localizadores precisos y la adjunción de anotaciones de condición, todo ello manteniendo una alta exhaustividad.
3. Normalización Determinista: Un proceso para limpiar y normalizar el grafo para las pruebas, seguido de una evaluación empírica tanto de la calidad del modelado del PTG como de la efectividad de las pruebas de extremo a extremo.
4. Evaluación Empírica: Un estudio exhaustivo sobre diez proyectos de código abierto de Vue.js, comparando LLMVue contra bases de exploración aleatoria.

4. Resultados Experimentales

El framework fue evaluado en diez proyectos de código abierto de Vue.js de GitHub, utilizando GPT-4o como base del LLM.

Calidad del PTG (RQ1)

Al compararse con la verdad de referencia (ground truth) construida por expertos:

• Precisión: Alta en todos los proyectos (promedio de 94.57%), con cuatro proyectos alcanzando el 100% de precisión. Esto indica que, una vez identificada una transición, el proceso de refinamiento suprime eficazmente las aristas espurias.
• Exhaustividad (Recall): Fuerte pero variable (promedio de 88.79%). Algunos proyectos mostraron una menor exhaustividad debido a la omisión de aristas en rutas complejas basadas en callbacks o condiciones.
• F1-Score: Promedio de 91.25%, con cinco proyectos superando el 90%.
• Distancia de Edición de Grafo (GED): El GED promedio fue 16, lo que indica que la mayoría de los grafos construidos están estructuralmente cerca de la verdad de referencia, aunque algunos proyectos con patrones de navegación complejos mostraron distancias mayores.

Efectividad de las Pruebas (RQ2)

Las pruebas guiadas por LLMVue se compararon con la exploración aleatoria bajo presupuestos de tiempo idénticos (60s a 600s) en dos proyectos representativos (P1: modelo de alta calidad; P3: estructuralmente complejo).

• Eficiencia de Acción: LLMVue ejecutó consistentemente significativamente más acciones que la exploración aleatoria (por ejemplo, +59.4% a +66.8% más acciones a los 300s), demostrando un mayor rendimiento de exploración y estabilidad.
• Cobertura de Páginas: LLMVue logró una mayor cobertura de páginas, particularmente en las etapas iniciales de las pruebas (por ejemplo, +13 puntos porcentuales a los 60s para P1), acelerando el descubrimiento de rutas.
• Cobertura de Sentencias: Las mejoras en la cobertura de código fueron más pronunciadas con presupuestos de tiempo más largos. Para el modelo de alta calidad (P1), la cobertura de sentencias aumentó de forma constante. Para el modelo complejo (P3), los beneficios se retrasaron pero se volvieron significativos con presupuestos mayores, sugiriendo que la guía estructural eventualmente se traduce en una ejecución de código más profunda.

5. Significación y Reivindicaciones

El artículo afirma ser el primero en utilizar Modelos de Lenguaje de Gran Escala para las pruebas de GUI basadas en modelos de aplicaciones Vue.js utilizando la extracción de PTG a nivel de fuente.

Los autores posicionan a LLMVue como una solución práctica que cierra la brecha entre el análisis de código fuente estático y los modelos de prueba ejecutables para SPAs modernas. Al combinar la extracción estática de alta exhaustividad con el refinamiento semántico basado en LLM, el framework navega con éxito por las complejidades del enrutamiento de Vue.js y las abstracciones de las librerías de UI. Los resultados sugieren que la construcción de PTG asistida por LLM proporciona una abstracción estructural robusta que mejora significativamente la eficiencia y la cobertura de las pruebas de GUI automatizadas en comparación con la exploración aleatoria, particularmente en escenarios con restricciones de tiempo.

Los autores mantienen la modestia respecto al alcance, señalando que el estudio se centra en la navegación sistemática y la medición de la cobertura, mientras que las aserciones funcionales de dominio específico quedan fuera del alcance. Reconocen que, aunque el enfoque es efectivo, persisten desafíos en el modelado de la navegación condicional compleja y el enrutamiento basado en callbacks, sugiriendo que el trabajo futuro debe centrarse en cerrar el bucle de retroalimentación entre la extracción y la ejecución de las pruebas.