一句话：利用 Canvas 对象的内部表示将快照分解为对象图像并与 oracle 素材比对，无需人工维护整图快照即可自动检测游戏视觉 bug。
HTML5 Canvas 被广泛用于网页游戏等 Web 应用的高质量图形渲染，但现有 Web 测试工具大多依赖 DOM 驱动自动化，而 Canvas 上的内容并不体现在 DOM 中，因此游戏难以自动测试，手工测试又十分费力。另一主流方案是快照测试：用图像相似度度量比较 oracle 快照与测试时快照以发现图形（视觉）缺陷，但为游戏创建与维护 oracle 快照代价高昂，违背测试自动化的初衷。本文提出一种自动检测游戏视觉缺陷的新方法：借助 Canvas 上对象的内部表示，把快照图像分解为一组对象图像，并将每个对象图像与其对应的 oracle 素材（如 sprite）用四种相似度度量进行比较——重叠百分比、均方误差、结构相似度与嵌入相似度。作者向一个自制游戏中注入 24 个视觉缺陷进行评估，该方法达到 100% 的准确率，而传统快照测试仅为 44.6%。
The HTML5 is used to display high quality graphics in web applications such as web games (i.e., games). However, automatically testing games is not possible with existing web testing techniques and tools, and manual testing is laborious. Many widely used web testing tools rely on the Document Object Model (DOM) to drive web test automation, but the contents of the are not represented in the DOM. The main alternative approach, snapshot testing, involves comparing oracle snapshot images with test-time snapshot images using an image similarity metric to catch visual bugs, i.e., bugs in the graphics of the web application. However, creating and maintaining oracle snapshot images for games is onerous, defeating the purpose of test automation. In this paper, we present a novel approach to automatically detect visual bugs in games. By leveraging an internal representation of objects on the , we decompose snapshot images into a set of object images, each of which is compared with a respective oracle asset (e.g., a sprite) using four similarity metrics: percentage overlap, mean squared error, structural similarity, and embedding similarity. We evaluate our approach by injecting 24 visual bugs into a custom game, and find that our approach achieves an accuracy of 100%, compared to an accuracy of 44.6% with traditional snapshot testing.
@inproceedings{paperbot7184,
title = {Automatically Detecting Visual Bugs in HTML5 Canvas Games},
author = {Finlay Macklon and Mohammad Reza Taesiri and Markos Viggiato and Stefan Antoszko and Natalia Romanova and Dale Paas and Cor-Paul Bezemer},
booktitle = {ASE},
year = {2022},
doi = {10.1145/3551349.3556913}
}