Layout Cross-Platform and Cross-Browser Incompatibilities Detection using Classification of DOM Elements

Abstract

Web applications can be accessed through a variety of user agent configurations, in which the browser, platform, and device capabilities are not under the control of developers. In order to grant the compatibility of a web application in each environment, developers must manually inspect their web application in a wide variety of devices, platforms, and browsers. Web applications can be rendered inconsistently depending on the browser, the platform, and the device capabilities which are used. Furthermore, the devices’ different viewport widths impact the way web applications are rendered in them, in which elements can be resized and change their absolute positions in the display. These adaptation strategies must also be considered in automatic incompatibility detection approaches in the state of the art. Hence, we propose a classification approach for detecting Layout Cross-platform and Cross-browser incompatibilities, which considers the adaptation strategies used in responsive web applications. Our approach is an extension of previous Cross-browser incompatibility detection approaches and has the goal of reducing the cost associated with manual inspections in different devices, platforms, and browsers, by automatically detecting Layout incompatibilities in this scenario. The proposed approach classifies each DOM element which composes a web application as an incompatibility or not, based on its attributes, position, alignment, screenshot, and the viewport width of the browser. We report the results of an experiment conducted with 42 Responsive Web Applications, rendered in three devices (Apple iPhone SE, Apple iPhone 8 Plus, and Motorola Moto G4) and browsers (Google Chrome and Apple Safari). The results (with F-measure of 0.70) showed evidence which quantify the effectiveness of our classification approach, and it could be further enhanced for detecting Cross-platform and Cross-browser incompatibilities. Furthermore, in the experiment, our approach also performed better when compared to a former state-of-the-art classification technique for Cross-browser incompatibilities detection.

Towards Cross-browser Incompatibilities Detection: Asystematic Literature Review

“…Even though browser engines have also evolved, research in this area still poses several challenges, such as: detecting cross-browser incompatibilities between different platforms (Cross-platform incompatibilities) [16,34], given the increased popularity and variety of mobile devices and alternative operational systems; responsive design failure detection [35] for detecting inconsistencies in web applications when rendered in different viewport width scenarios; and automatic correction of Cross-browser incompatibilities using Search-Based Software Engineering [17].…”

Effective automated repair of internationalization presentation failures in web applications using style similarity clustering and search‐based techniques

“…Conversely, another technique [30] provides automated domain specific translations using recurrent neural networks. Several techniques [31‐37] are designed to detect and Cross‐Platform Incompatibilities and Cross‐Browser Issues in web pages by analysing HTML, CSS and Javascript. Yet other techniques, such as ReDeCheck [38‐42], WebSee [11‐13,43‐45], VFDetector [46], CANVASURE [47], Ply [48], Fighting Layout Bugs [49], Sikuli [50], and techniques based on computer vision [51] and CSS/Javascript analysis [52], detect certain types of presentation failures in web pages.…”