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 their capabilities and render 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 DOM-structure (DOM-based approaches) and screenshots (computer vision approaches) of Web applications. A comparison between both DOM-based and computer vision classification models has not been previously reported in the literature and a combination between both approaches could possibly lead to increased accuracy of classification models. In this paper, 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 which negatively affect the layout of Responsive Design Web applications. Furthermore, we propose an enhanced classification model which 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 suggest the use of other image similarity metrics or Deep Learning models for increasing the efficacy of classification models.