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

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.

[1]  Arie van Deursen,et al.  Crawling Ajax-Based Web Applications through Dynamic Analysis of User Interface State Changes , 2012, TWEB.

[2]  David M. W. Powers,et al.  Evaluation: from precision, recall and F-measure to ROC, informedness, markedness and correlation , 2011, ArXiv.

[3]  Alessandro Orso,et al.  X-PERT: a web application testing tool for cross-browser inconsistency detection , 2014, ISSTA 2014.

[4]  I. Kononenko,et al.  INDUCTION OF DECISION TREES USING RELIEFF , 1995 .

[5]  Ali Mesbah,et al.  Automated cross-browser compatibility testing , 2011, 2011 33rd International Conference on Software Engineering (ICSE).

[6]  Martin Schader,et al.  Using established Web Engineering knowledge in model-driven approaches , 2007, Sci. Comput. Program..

[7]  C. L. Philip Chen,et al.  Adaptive least squares support vector machines filter for hand tremor canceling in microsurgery , 2011, Int. J. Mach. Learn. Cybern..

[8]  Plinio Thomaz Aquino,et al.  Automatic Deformations Detection in Internet Interfaces: ADDII , 2015, HCI.

[9]  Shen Yin,et al.  Tuning kernel parameters for SVM based on expected square distance ratio , 2016, Inf. Sci..

[10]  H. Tanaka,et al.  Webpage cross-browser test from image level , 2017, 2017 IEEE International Conference on Multimedia and Expo (ICME).

[11]  Alessandro Orso,et al.  X-PERT: Accurate identification of cross-browser issues in web applications , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[12]  Cardona Alzate,et al.  Predicción y selección de variables con bosques aleatorios en presencia de variables correlacionadas , 2020 .

[13]  Marlon Dumas,et al.  Cross-Browser Testing in Browserbite , 2014, ICWE.

[14]  Wei Chen,et al.  X-Check: A Novel Cross-Browser Testing Service Based on Record/Replay , 2016, 2016 IEEE International Conference on Web Services (ICWS).

[15]  Willian Massami Watanabe,et al.  Layout cross-browser incompatibility detection using machine learning and DOM segmentation , 2018, SAC.

[16]  Alessandro Orso,et al.  Cross-platform feature matching for web applications , 2014, ISSTA 2014.

[17]  Alessandro Orso,et al.  CrossCheck: Combining Crawling and Differencing to Better Detect Cross-browser Incompatibilities in Web Applications , 2012, 2012 IEEE Fifth International Conference on Software Testing, Verification and Validation.

[18]  Phil McMinn,et al.  Automated repair of layout cross browser issues using search-based techniques , 2017, ISSTA.

[19]  Alessandro Orso,et al.  A cross-browser web application testing tool , 2010, 2010 IEEE International Conference on Software Maintenance.

[20]  Yang Liu,et al.  A method for multi-class sentiment classification based on an improved one-vs-one (OVO) strategy and the support vector machine (SVM) algorithm , 2017, Inf. Sci..

[21]  Giuseppe A. Di Lucca,et al.  Testing Web-based applications: The state of the art and future trends , 2006, Inf. Softw. Technol..

[22]  Lior Rokach,et al.  Decision Trees , 2005, The Data Mining and Knowledge Discovery Handbook.

[23]  Martin Burger,et al.  WebMate: Web Application Test Generation in the Real World , 2014, 2014 IEEE Seventh International Conference on Software Testing, Verification and Validation Workshops.

[24]  Phil McMinn,et al.  ReDeCheck: an automatic layout failure checking tool for responsively designed web pages , 2017, ISSTA.

[25]  Fagner Christian Paes.  Automatic detection of cross-browser incompatibilities using machine learning and screenshot similarity: student research abstract , 2017, SAC.

[26]  Leo Breiman,et al.  Random Forests , 2001, Machine Learning.