Abstract: As a core component of modern Web applications,HTML5 Canvas is widely used for dynamic rendering of interfaces,data visualization,etc.However,since Canvas elements lack a DOM structure,existing Web testing tools struggle to test them effectively.In order to solve the above problem,this paper proposes an automated testing method for Canvas elements based on large models,which solves this challenge by combining the advantages of computer vision technology and large model technology.The YOLO object detection algorithm is used to extract the category and geometric attributes of the elements inside the Canvas interface,and further extract the color,related text and hierarchical relationship of the inferred elements to construct an enhanced DOM structure.Prompt strategies are designed to guide large models to make full use of Canvas images and enhance DOM information to generate high-coverage test cases.Experiments show that the proposed method is significantly better than the existing methods(such as VisionTasker) in terms of results,and achieves 10.53% and 16.85% improvement in element coverage and interaction coverage,respectively.In addition,only by using the enhanced DOM structure for test case generation,99.18% of the element coverage and 98.22% of the interaction coverage effect of the proposed method can be achieved with less resource consumption.In addition,this paper compares the performance of different large language models on the research tasks,verifying the versatility and effectiveness of the proposed method.

Key words: Canvas testing, LLM, Enhanced DOM, Coverage