Resumo Técnico: Teste de GUI Baseado em Modelo Assistido por LLM para Aplicações Web Vue.js

1. Declaração do Problema

O Vue.js tornou-se um framework dominante para o desenvolvimento web moderno, caracterizado por sua arquitetura de componentes reativos e roteamento no lado do cliente. No entanto, garantir a confiabilidade de aplicações Single-Page Applications (SPAs) de larga escala em Vue.js através de testes automatizados apresenta desafios únicos. Embora o Teste Baseado em Modelo (MBT) tenha automatizado com sucesso o teste de Interface Gráfica do Usuário (GUI) em outras plataformas utilizando Grafos de Transição de Página (PTGs), aplicar isso ao Vue.js continua sendo difícil devido a três complexidades específicas do framework:

1. Lógica de Navegação Distribuída: A intenção de navegação é fragmentada entre configurações de roteador, Componentes de Arquivo Único (SFCs), componentes de layout compartilhados e estruturas de roteamento aninhadas, tornando difícil a construção de um modelo unificado.
2. Encapsulamento por Bibliotecas de UI: As ações de navegação são frequentemente encapsuladas dentro de componentes de UI de terceiros (ex: Element UI/Plus), o que obscurece os elementos clicáveis subjacentes e as APIs de roteamento.
3. Navegação Condicional em Tempo de Execução: Menus e transições são frequentemente protegidos por condições de tempo de execução mutuamente exclusivas (ex: funções de usuário, estados de autenticação). A análise estática muitas vezes falha em distinguir entre esses ramos condicionais, levando a transições conflitantes que não são executáveis em estados específicos (ex: tentar clicar em um item de menu visível apenas para administradores enquanto está logado como um usuário padrão).

Abordagens existentes lutam para recuperar um modelo de navegação executável e cross-component do código-fonte Vue.js sem perder transições válidas (baixa revocação/recall) ou gerar caminhos não executáveis (baixa precisão).

2. Metodologia: O Framework LLMVue

Para enfrentar esses desafios, os autores propõem o LLMVue, um framework de três estágios que gera um PTG de nível de fonte e cross-component a partir do código-fonte Vue.js para guiar o MBT. O framework utiliza um Large Language Model (LLM), especificamente o GPT-4o, para refinar os resultados da análise estática.

Estágio I: Extração de Grafo Estático (Alta Revocação)

O processo começa com uma análise estática conservadora do código-fonte Vue.js (configurações de roteador e SFCs) usando Árvores de Sintaxe Abstrata (ASTs).

• Objetivo: Maximizar a revocação capturando todos os candidatos plausíveis de transição de rota para rota, mesmo que sejam imprecisos ou ambíguos.
• Mecanismo: O sistema analisa tabelas de roteamento para redirecionamentos explícitos e extrai widgets de navegação (ex: router-link, itens de menu) e chamadas de navegação baseadas em script (ex: $router.push).
• Saída: Um PTG candidato inicial, potencialmente ruidoso ($G_1$), onde os seletores são placeholders genéricos (ex: baseados em tags ou classes) e as condições ainda não foram totalmente resolvidas.

Estágio II: Refinamento Semântico Baseado em LLM

Este estágio utiliza um LLM para enriquecer as arestas candidatas sem deletar nenhuma, preservando a alta revocação estabelecida no Estágio I.

• Melhoria de Seletores: O LLM converte placeholders genéricos em locators do Playwright executáveis, anexando restrições de texto (ex: :has-text(...)) e normalizando nomes de classes específicos de frameworks (ex: lidando com diferenças entre Element UI e Element Plus).
• Extração de Condições: O LLM extrai condições de visibilidade e habilitação (ex: diretivas v-if, lógica de script) e anota as arestas com metadados (ex: CROSS_ROLE para ramos mutuamente exclusivos).
• Validação: O processo inclui mecanismos de tentativa de repetição iterativa com reflexão de prompting para garantir que a saída adira ao esquema da aresta e à validade da tabela de rotas. Se a validação falhar após as tentativas, as arestas originais do Estágio I são mantidas para evitar perda de dados.

Estágio III: Normalização do Grafo

O estágio final aplica filtragem determinística e deduplicação para produzir o PTG executável ($G_3$).

• Remoção de Redundância: Arestas estruturais (relações pai-filho na tabela de roteamento) e artefatos de redirecionamento global são removidos.
• Deduplicação: Seletores redundantes são consolidados. O sistema prioriza seletores específicos sobre os genéricos e lida com prefixos de submenus para garantir caminhos acionáveis distintos.
• Filtragem: Arestas cross-group derivadas de ramos condicionais mutuamente exclusivos são filtradas com base em rótulos de ramos, e auto-loops espúrios são removidos, exceto para etapas necessárias de expansão de UI.

O PTG resultante é usado por um motor de teste (usando Playwright) para selecionar e executar sistematicamente arestas de saída do nó de rota atual até que um orçamento de tempo/ação seja esgotado.

3. Principais Contribuições

O artigo apresenta as seguintes contribuições específicas:

1. Framework LLMVue: Um framework de ponta a ponta para construir PTGs de nível de fonte para aplicações Vue.js, habilitando diretamente o teste de GUI baseado em modelo.
2. Refinamento de Aresta Assistido por LLM: Uma técnica inovadora que transforma candidatos estáticos focados em revocação em arestas executáveis, sintetizando locators precisos e anexando anotações de condição, tudo isso mantendo alta revocação.
3. Normalização Determinística: Um processo para limpar e normalizar o grafo para teste, seguido por uma avaliação empírica tanto da qualidade de modelagem do PTG quanto da eficácia do teste de ponta a ponta.
4. Avaliação Empírica: Um estudo abrangente em dez projetos open-source de Vue.js, comparando o LLMVue contra baselines de exploração aleatória.

4. Resultados Experimentais

O framework foi avaliado em dez projetos Vue.js de código aberto do GitHub, utilizando o GPT-4o como o backbone do LLM.

Qualidade do PTG (RQ1)

Quando comparado ao ground truth construído por especialistas:

• Precisão: Alta em todos os projetos (média de 94,57%), com quatro projetos atingindo 100% de precisão. Isso indica que, uma vez que uma transição é identificada, o processo de refinamento suprime efetivamente arestas espúrias.
• Revocação (Recall): Forte, mas variável (média de 88,79%). Alguns projetos mostraram menor revocação devido a arestas perdidas em roteamentos complexos ou baseados em callbacks.
• F1-Score: Média de 91,25%, com cinco projetos excedendo 90%.
• Distância de Edição de Grafo (GED): O GED médio foi 16, indicando que a maioria dos grafos construídos é estruturalmente próxima do ground truth, embora alguns projetos com padrões de navegação complexos tenham mostrado distâncias maiores.

Eficácia de Teste (RQ2)

O teste guiado pelo LLMVue foi comparado com a exploração aleatória sob orçamentos de tempo idênticos (60s a 600s) em dois projetos representativos (P1: modelo de alta qualidade; P3: estruturalmente complexo).

• Eficiência de Ação: O LLMVue executou consistentemente muito mais ações do que a exploração aleatória (ex: +59,4% a +66,8% mais ações em 300s), demonstrando maior throughput de exploração e estabilidade.
• Cobertura de Página: O LLMVue alcançou maior cobertura de página, particularmente nos estágios iniciais do teste (ex: +13 pontos percentuais em 60s para P1), acelerando a descoberta de rotas.
• Cobertura de Instrução (Statement Coverage): As melhorias na cobertura de código foram mais pronunciadas com orçamentos de tempo mais longos. Para o modelo de alta qualidade (P1), a cobertura de instrução aumentou de forma constante. Para o modelo complexo (P3), os benefícios foram retardados, mas tornaram-se significativos em orçamentos maiores, sugerindo que a orientação estrutural eventualmente se traduz em uma execução de código mais profunda.

5. Significância e Alegações

O artigo afirma ser o primeiro uso de Large Language Models para o teste de GUI baseado em modelo de aplicações Vue.js utilizando extração de PTG de nível de fonte.

Os autores posicionam o LLMVue como uma solução prática que preenche a lacça entre a análise de código-fonte estática e modelos de teste executáveis para SPAs modernas. Ao combinar a extração estática de alta revocação com o refinamento semântico via LLM, o framework navega com sucesso pelas complexidades do roteamento Vue.js e abstrações de bibliotecas de UI. Os resultados sugerem que a construção de PTG assistida por LLM fornece uma abstração estrutural robusta que melhora significativamente a eficiência e a cobertura do teste automatizado de GUI em comparação com a exploração aleatória, particularmente em cenários com restrição de tempo.

Os autores permanecem modestos quanto ao escopo, observando que o estudo foca em navegação sistemática e medição de cobertura, enquanto asserções funcionais de domínio específico estão fora do escopo. Eles reconhecem que, embora a abordagem seja eficaz, desafios permanecem na modelagem de navegação condicional complexa e roteamento baseado em callback, sugerindo trabalhos futuros para fechar o loop de feedback entre a extração e a execução do teste.