LLM-Assisted Model-Based GUI Testing for Vue.js Web Applications

2026-06-25

AI Summary

This work addresses the challenge of GUI testing in Vue.js applications, where page navigation logic is fragmented across router configurations and single-file components, hindering automated construction of page transition graphs (PTGs). To overcome this, the study proposes a novel approach that integrates large language models—using GPT-4o as the backbone—with static code analysis to infer relationships between components and routes, thereby automatically generating and unifying a comprehensive PTG. This graph is then leveraged to drive model-based GUI testing. Empirical evaluation on ten open-source Vue.js projects demonstrates that the generated PTGs achieve high precision and recall, and that test exploration guided by these graphs significantly outperforms random strategies within the same time budget, yielding improved coverage and exploration efficiency.

Abstract

Vue.js is a popular framework for building modern web applications. As Vue.js functionality and tooling support grow, ensuring its reliability (through automated testing) is becoming increasingly important. Although model-based testing has been successfully used to automate graphical user interface (GUI) testing on other platforms, its application to Vue.js remains challenging: Transition candidates, which are spread across router configurations and single-file components (SFCs), must be concretized and normalized into an executable page transition graph (PTG) for testing. To address this, we propose the LLMVue framework, which uses a large language model (LLM) to generate a PTG from Vue.js source code. LLMVue infers component hierarchies and route transitions, merging them into a unified PTG across multiple SFCs. We evaluated LLMVue on a collection of ten open-source Vue.js projects from GitHub, using GPT-4o as the LLM backbone. The constructed graphs demonstrate high precision and recall, with low graph edit distance. LLMVue -guided testing also significantly improves the coverage and exploration efficiency, compared to a random exploration baseline (with the same time constraints). To the best of our knowledge, this is the first use of LLMs for model-based GUI testing of Vue.js applications using source-level PTG extraction.

Problem

• Vue.js
• model-based testing
• GUI testing
• page transition graph
• single-file components

Innovation

• LLM-assisted testing
• model-based GUI testing
• Vue.js
• page transition graph
• source code analysis