Vue.js 웹 애플리케이션을 위한 LLM 지원 모델 기반 GUI 테스트

Vue.js는 현대적인 웹 애플리케이션을 구축하기 위한 인기 있는 프레임워크입니다. Vue.js의 기능과 툴링(tooling) 지원이 성장함에 따라, (자동화된 테스트를 통해) 그 신뢰성을 보장하는 것이 점점 더 중요해지고 있습니다. 모델 기반 테스트(model-based testing)가 다른 플랫폼의 그래픽 사용자 인터페이스 (GUI) 테스트를 자동화하는 데 성공적으로 사용되어 왔지만, Vue.js에 대한 적용은 여전히 도전적인 과제로 남아 있습니다. 라우터 설정(router configurations)과 싱글 파일 컴포넌트(SFCs)에 흩어져 있는 전환 후보(Transition candidates)들을 테스트를 위해 실행 가능한 페이지 전환 그래프 (PTG)로 구체화하고 정규화해야 하기 때문입니다. 이를 해결하기 위해, 우리는 대규모 언어 모델 (LLM)을 사용하여 Vue.js 소스 코드로부터 PTG를 생성하는 LLMVue 프레임워크를 제안합니다. LLMVue는 컴포넌트 계층 구조와 경로 전환을 추론하여, 여러 SFC에 걸쳐 통합된 PTG로 병합합니다. 우리는 GPT-4o를 LLM 백본(backbone)으로 사용하여 GitHub의 10개 오픈 소스 Vue.js 프로젝트 모음에서 LLMVue를 평가했습니다. 구축된 그래프는 낮은 그래프 편집 거리(graph edit distance)와 함께 높은 정밀도(precision) 및 재현율(recall)을 보여주었습니다. LLMVue 가이드 테스트는 (동일한 시간 제약 조건 하의) 무작위 탐색 베이스라인과 비교했을 때 커버리지(coverage)와 탐색 효율성을 크게 향상시켰습니다. 우리가 알고 있는 바로는, 이것이 소스 레벨 PTG 추출을 사용하여 Vue.js 애플리케이션의 모델 기반 GUI 테스트에 LLM을 사용한 첫 번째 사례입니다.