Web Canvas Testing Through Visual Inference

Canvas elements are one of the major web technologies for creating high-performance graphics and visualizations in the browser. The canvas provides APIs for directly painting on the screen, but does not have a DOM state. As such, common web testing techniques that rely on the DOM cannot be applied to canvas elements. Furthermore, there has been little to no research in the literature for testing canvas elements. We propose an automated approach for testing canvas elements and their properties. Our approach performs a visual analysis of the screenshots of canvas elements and infers visual objects, their attributes, and their hierarchical relationships present on the canvas. Each inferred object is then represented as an augmented element inside the canvas element on the DOM tree. Finally, tests are generated from the augmented canvas DOM with assertions that check the inferred objects. We implement this approach in a tool, CanvaSure, and evaluate its accuracy and effectiveness for testing canvas-based applications. Our evaluation results show that CanvaSure has an accuracy of 91% for visually inferring the contents of the canvas, and is capable of correctly detecting 93% of injected visual faults on canvas applications.