Willian Massami Watanabe
Giovana Lázaro Amêndola
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.
- Leo Breiman. 2001. Random forests. Machine Learning 45, 1 (Oct. 2001), 5--32. Google Scholar
Digital Library
- S. R. Choudhary, M. R. Prasad, and A. Orso. 2012. CrossCheck: Combining crawling and differencing to better detect cross-browser incompatibilities in web applications. In Proceedings of the 5th International Conference on Software Testing, Verification and Validation (ICST’12). 171--180. Google ScholarDigital Library
- S. R. Choudhary, M. R. Prasad, and A. Orso. 2013. X-PERT: Accurate identification of cross-browser issues in web applications. In Proceedings of the 35th International Conference on Software Engineering (ICSE’13). 702--711. Google ScholarDigital Library
- S. R. Choudhary, H. Versee, and A. Orso. 2010. A cross-browser web application testing tool. In Proceedings of the 2010 IEEE International Conference on Software Maintenance (ICSM’10). 1--6. Google ScholarDigital Library
- S. R. Choudhary, Mukul R. Prasad, and Alessandro Orso. 2014. X-PERT: A web application testing tool for cross-browser inconsistency detection. In Proceedings of the 2014 International Symposium on Software Testing and Analysis (ISSTA’14). ACM, New York, 417--420. Google ScholarDigital Library
- V. Dallmeier, B. Pohl, M. Burger, M. Mirold, and A. Zeller. 2014. WebMate: Web application test generation in the real world. In Proceedings of the Workshops of the IEEE 7th International Conference on Software Testing, Verification and Validation Workshops (ICSTW’14). 413--418. Google ScholarDigital Library
- Giuseppe A. Di Lucca and Anna Rita Fasolino. 2006. Testing web-based applications: The state of the art and future trends. Information and Software Technology 48, 12 (Dec. 2006), 1172--1186. Google ScholarDigital Library
- Ralf Gitzel, Axel Korthaus, and Martin Schader. 2007. Using established web engineering knowledge in model-driven approaches. Science of Computer Programming 66, 2 (2007), 105--124. Google ScholarDigital Library
- M. He, G. Wu, H. Tang, W. Chen, J. Wei, H. Zhong, and T. Huang. 2016. X-Check: A novel cross-browser testing service based on record/replay. In 2016 IEEE International Conference on Web Services (ICWS’16). 123--130.Google Scholar
- Yang Liu, Jian-Wu Bi, and Zhi-Ping Fan. 2017. A method for multi-class sentiment classification based on an improved one-vs-one (OVO) strategy and the support vector machine (SVM) algorithm. Information Sciences 394--395 (2017), 38--52. Google ScholarDigital Library
- P. Lu, W. Fan, J. Sun, H. Tanaka, and S. Naoi. 2017. Webpage cross-browser test from image level. In 2017 IEEE International Conference on Multimedia and Expo (ICME’17). 349--354.Google Scholar
- Sonal Mahajan, Abdulmajeed Alameer, Phil McMinn, and William G. J. Halfond. 2017. Automated repair of layout cross browser issues using search-based techniques. In Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis (ISSTA’17). ACM, New York, 249--260. Google ScholarDigital Library
- Ali Mesbah and Mukul R. Prasad. 2011. Automated cross-browser compatibility testing. In Proceedings of the 33rd International Conference on Software Engineering (ICSE’11). ACM, New York, 561--570. Google ScholarDigital Library
- Ali Mesbah, Arie van Deursen, and Stefan Lenselink. 2012. Crawling ajax-based web applications through dynamic analysis of user interface state changes. ACM Transactions on the Web 6, 1 (March 2012), Article 3, 30 pages. Google ScholarDigital Library
- Fagner Christian Paes. 2017. Automatic detection of cross-browser incompatibilities using machine learning and screenshot similarity: Student research abstract. In Proceedings of the Symposium on Applied Computing (SAC’17). ACM, New York, 697--698. Google ScholarDigital Library
- Fagner Christian Paes and Willian Massami Watanabe. 2018. Layout cross-browser incompatibility detection using machine learning and DOM segmentation. In Proceedings of the 33rd Annual ACM Symposium on Applied Computing (SAC’18). ACM, New York, 2159--2166. Google ScholarDigital Library
- D. M. W. Powers. 2011. Evaluation: From precision, recall and f-measure to roc., informedness, markedness and correlation. Journal of Machine Learning Technologies 2, 1 (2011), 37--63.Google ScholarCross Ref
- J. R. Quinlan. 1986. Induction of decision trees. Machine Learning 1, 1 (March 1986), 81--106. Google ScholarDigital Library
- Lior Rokach and Oded Maimon. 2005. Decision Trees. Springer US, Boston, MA, Chapter 9, 165--192.Google Scholar
- Shauvik Roy Choudhary, Mukul R. Prasad, and Alessandro Orso. 2014. Cross-platform feature matching for web applications. In Proceedings of the 2014 International Symposium on Software Testing and Analysis (ISSTA’14). ACM, New York, 82--92. Google ScholarDigital Library
- Tõnis Saar, Marlon Dumas, Marti Kaljuve, and Nataliia Semenenko. 2014. Cross-Browser Testing in Browserbite. Springer International Publishing, Cham, 503--506.Google Scholar
- Leandro Sanchez and Plinio Thomaz Aquino Jr. 2015. Automatic deformations detection in internet interfaces: ADDII. In Proceedings of the 17th International Conference on Human-Computer Interaction. Part III: Users and Contexts (HCI International 2015), Lecture Notes in Computer Science, Vol. 9171. Springer International Publishing, 43--53.Google ScholarCross Ref
- Thomas A. Walsh, Gregory M. Kapfhammer, and Phil McMinn. 2017. ReDeCheck: An automatic layout failure checking tool for responsively designed web pages. In Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis (ISSTA’17). ACM, New York, 360--363. Google ScholarDigital Library
- Shen Yin and Jiapeng Yin. 2016. Tuning kernel parameters for SVM based on expected square distance ratio. Information Sciences 370--371 (2016), 92--102. Google ScholarDigital Library
Index Terms
- Layout Cross-Platform and Cross-Browser Incompatibilities Detection using Classification of DOM Elements
Recommendations
Layout Cross-Browser Failure Classification for Mobile Responsive Design Web Applications: Combining Classification Models Using Feature Selection
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 ...
Layout cross-browser incompatibility detection using machine learning and DOM segmentation
SAC '18: Proceedings of the 33rd Annual ACM Symposium on Applied ComputingCross-Browser Incompatibilities, namely XBIs, are differences in the behavior of web applications as they are rendered in distinct browser implementations. Web applications can be rendered in a wide variety of configuration environments, varying their ...
X-PERT: a web application testing tool for cross-browser inconsistency detection
ISSTA 2014: Proceedings of the 2014 International Symposium on Software Testing and AnalysisWeb applications are popular among developers because of the ease of development and deployment through the ubiquitous web browsing platform. However, differences in a web application's execution across different web browsers manifest as Cross-browser ...
Comments