Layout Cross-Browser Failure Classification for Mobile Responsive Design Web Applications: Combining Classification Models Using Feature Selection

Abstract

Cross-browser incompatibilities (XBIs) are defined as inconsistencies that can be observed in Web applications when they are rendered in a specific browser compared to others. These inconsistencies are associated with differences in the way each browser implements its capabilities and renders Web applications. The inconsistencies range from minor layout differences to lack of core functionalities of Web applications when rendered in specific browsers. The state of the art proposes different approaches for detecting XBIs and many of them are based on classification models, using features extracted from the document object model (DOM) structure (DOM-based approaches) and screenshots (computer vision approaches) of Web applications. To the best of our knowledge, a comparison between DOM-based and computer vision classification models has not yet been reported in the literature, and a combination between both approaches could possibly lead to increased accuracy of classification models. In this article, we extend the use of these classification models for detecting layout XBIs in responsive design Web applications, rendered on different browser viewport widths and devices (iPhone 12 mini, iPhone 12, iPhone 12 Pro Max, and Pixel XL). We investigate the use of state-of-the-art classification models (Browserbite, CrossCheck, and our previous work) for detecting layout cross-browser failures, which consist of layout XBIs that negatively affect the layout of responsive design Web applications. Furthermore, we propose an enhanced classification model that combines features from different state-of-the-art classification models (DOM based and computer vision) using feature selection. We built two datasets for evaluating the efficacy of classification models in separately detecting external and internal layout failures using data from 72 responsive design Web applications. The proposed classification model reported the highest F1-score for detecting external layout failures (0.65) and internal layout failures (0.35), and these results reported significant differences compared to Browserbite and CrossCheck classification models. Nevertheless, the experiment showed a lower accuracy in the classification of internal layout failures and suggests the use of other image similarity metrics or deep learning models for increasing the efficacy of classification models.