Finding HTML presentation failures using image comparison techniques

Abstract

Presentation failures in web applications can negatively affect an application's usability and user experience. To find such failures, testers must visually inspect the output of a web application or exhaustively specify invariants to automatically check a page's correctness. This makes finding presentation failures labor intensive and error prone. In this paper, we present a new automated approach for detecting and localizing presentation failures in web pages. To detect presentation failures, our approach uses image processing techniques to compare a web page and its oracle. Then, to localize the failures, our approach analyzes the page with respect to its visual layout and identifies the HTML elements likely to be responsible for the failure. We evaluated our approach on a set of real-world web applications and found that the approach was able to accurately detect failures and identify the faulty HTML elements.

Automated layout failure detection for responsive web pages without an explicit oracle

“…e use of an explicit oracle -that is not another graph but instead a reference image or speci cation -is also common in other works for detecting presentation failures. For example, the work of Mahajan and Halfond compares the rendering of a page with an oracle image using image comparison techniques [29].…”

“…For each range, the algorithm identi es the set of elements that are children of e between the relevant viewport widths (steps 15-16), and nds which of these children are in rows (steps 17-18) through a call to the C I R procedure. In this procedure (steps [23][24][25][26][27][28][29][30], if an alignment constraint for two child elements e 1 and e 2 has the alignment a ributes "L" or "R" (i.e., e 1 is to the le of or to the right of e 2 ), and does not also have the a ributes "A" or "B" (i.e., e 1 is above or below e 2 , and therefore despite being oriented to the le of e 2 is not horizontally aligned with it in a row), the two elements are added to a set of elements, denoted IR, that are deemed to constitute a row (step 28). If a certain viewport range contains more than two elements considered to be in a row (identi ed by C I R ), and one of the elements in this set is not in the corresponding set for the previous adjacent viewport range, a wrapping failure is reported (steps 20-21).…”

Automated repair of layout cross browser issues using search-based techniques

“…Techniques such as WebSee [25][26][27] and FieryEye [28,29], focus on detecting presentation failures -a discrepancy in the actual and intended appearance of a web page -and localizing them to HTML elements and CSS properties in the page. GWALI [2] focuses on detecting presentation failures in internationalized web pages and nding faulty HTML elements.…”

XFix: an automated tool for the repair of layout cross browser issues

“…Work in the eld of web app presentation testing, such as WebSee [5][6][7] and FieryEye [8,9] focuses on detecting and localizing presentation failures -a discrepancy in the actual and intended appearance of a web page . Another technique, GWALI [1], can detect layout failures in web pages a er they are translated from one language to another.…”