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

Companies often employ internationalization (i18n) frameworks to provide translated text and localized media content on their websites in order to effectively communicate with a global audience. However, the varying lengths of text from different languages can cause undesired distortions in the layout of a web page. Such distortions, called Internationalization Presentation Failures (IPFs), can negatively affect the aesthetics or usability of thewebsite. Most of the existing automated techniques developed for assisting repair of IPFs either produce fixes that are likely to significantly reduce the legibility and attractiveness of the pages, or are limited to only detecting IPFs, with the actual repair itself remaining a labor intensive manual task. To address this problem, we propose a search-based technique for automatically repairing IPFs in web applications, while ensuring a legible and attractive page. The empirical evaluation of our approach reported that our approach was able to successfully resolve 94% of the detected IPFs for 46 real-world web pages. In a user study, participants rated the visual quality of our fixes significantly higher than the unfixed versions, and also considered the repairs generated by our approach to be notably more legible and visually appealing than the repairs generated by existing techniques.

[1]  William G. J. Halfond,et al.  An Empirical Study of Internationalization Failures in the Web , 2016, 2016 IEEE International Conference on Software Maintenance and Evolution (ICSME).

[2]  Andres Sanoja,et al.  Block-o-Matic: A web page segmentation framework , 2014, 2014 International Conference on Multimedia Computing and Systems (ICMCS).

[3]  Haoqi Zhang,et al.  Ply: A Visual Web Inspector for Learning from Professional Webpages , 2018, UIST.

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

[5]  Frank Tip,et al.  Automated repair of HTML generation errors in PHP applications using string constraint solving , 2012, 2012 34th International Conference on Software Engineering (ICSE).

[6]  Peter Han Joo Chong,et al.  An automatic layout faults detection technique in responsive web pages considering JavaScript defined dynamic layouts , 2016, 2016 3rd International Conference on Electrical Engineering and Information Communication Technology (ICEEICT).

[7]  Rudolf Ramler,et al.  How to Test in Sixteen Languages? Automation Support for Localization Testing , 2017, 2017 IEEE International Conference on Software Testing, Verification and Validation (ICST).

[8]  Dirk Sudholt,et al.  Design and analysis of different alternating variable searches for search-based software testing , 2015, Theor. Comput. Sci..

[9]  Atif M. Memon,et al.  GUITAR: an innovative tool for automated testing of GUI-driven software , 2014, Automated Software Engineering.

[10]  Ana C. R. Paiva,et al.  A pattern-based approach for GUI modeling and testing , 2013, 2013 IEEE 24th International Symposium on Software Reliability Engineering (ISSRE).

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

[12]  Michael D. Ernst,et al.  Verifying that web pages have accessible layout , 2018, PLDI.

[13]  Anjaneyulu Pasala,et al.  Detecting and Localizing Visual Inconsistencies in Web Applications , 2016, 2016 23rd Asia-Pacific Software Engineering Conference (APSEC).

[14]  Alessandro Orso,et al.  WEBDIFF: Automated identification of cross-browser issues in web applications , 2010, 2010 IEEE International Conference on Software Maintenance.

[15]  Sukyoung Ryu,et al.  Automatic Detection of Visibility Faults by Layout Changes in HTML5 Web Pages , 2018, 2018 IEEE 11th International Conference on Software Testing, Verification and Validation (ICST).

[16]  Phil McMinn,et al.  Automated Repair of Internationalization Presentation Failures in Web Pages Using Style Similarity Clustering and Search-Based Techniques , 2018, 2018 IEEE 11th International Conference on Software Testing, Verification and Validation (ICST).

[17]  William G. J. Halfond,et al.  Detection and Localization of HTML Presentation Failures Using Computer Vision-Based Techniques , 2015, 2015 IEEE 8th International Conference on Software Testing, Verification and Validation (ICST).

[18]  William G. J. Halfond,et al.  Detecting and Localizing Internationalization Presentation Failures in Web Applications , 2016, 2016 IEEE International Conference on Software Testing, Verification and Validation (ICST).

[19]  Phil McMinn,et al.  Automated Repair of Mobile Friendly Problems in Web Pages , 2018, 2018 IEEE/ACM 40th International Conference on Software Engineering (ICSE).

[20]  Boyang Li,et al.  Automated Reporting of GUI Design Violations for Mobile Apps , 2018, 2018 IEEE/ACM 40th International Conference on Software Engineering (ICSE).

[21]  Fan Long,et al.  Staged program repair with condition synthesis , 2015, ESEC/SIGSOFT FSE.

[22]  Shoaib Kamil,et al.  Modular verification of web page layout , 2019, Proc. ACM Program. Lang..

[23]  Atif M. Memon,et al.  What test oracle should I use for effective GUI testing? , 2003, 18th IEEE International Conference on Automated Software Engineering, 2003. Proceedings..

[24]  Wei Chen,et al.  X-Diag: Automated Debugging Cross-Browser Issues in Web Applications , 2018, 2018 IEEE International Conference on Web Services (ICWS).

[25]  Willian Massami Watanabe,et al.  Layout Cross-Platform and Cross-Browser Incompatibilities Detection using Classification of DOM Elements , 2019, ACM Trans. Web.

[26]  Nishant Sinha,et al.  Responsive designs in a snap , 2015, ESEC/SIGSOFT FSE.

[27]  Ali Mesbah,et al.  Web Canvas Testing Through Visual Inference , 2018, 2018 IEEE 11th International Conference on Software Testing, Verification and Validation (ICST).

[28]  J. Archana,et al.  Automation framework for localizability testing of internationalized software , 2013, 2013 International Conference on Human Computer Interactions (ICHCI).

[29]  Ali Mesbah,et al.  Vejovis: suggesting fixes for JavaScript faults , 2014, ICSE.

[30]  Hiroaki Yoshida,et al.  Elixir: Effective object-oriented program repair , 2017, 2017 32nd IEEE/ACM International Conference on Automated Software Engineering (ASE).

[31]  B. J. Fogg,et al.  What makes Web sites credible?: a report on a large quantitative study , 2001, CHI.

[32]  Wei-Ying Ma,et al.  VIPS: a Vision-based Page Segmentation Algorithm , 2003 .

[33]  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.

[34]  Michael D. Ernst,et al.  Automatically repairing broken workflows for evolving GUI applications , 2013, ISSTA.

[35]  Hiroaki Yoshida,et al.  Phoenix: automated data-driven synthesis of repairs for static analysis violations , 2019, ESEC/SIGSOFT FSE.

[36]  Rob Miller,et al.  GUI testing using computer vision , 2010, CHI.

[37]  Phil McMinn,et al.  AVMf: An Open-Source Framework and Implementation of the Alternating Variable Method , 2016, SSBSE.

[38]  Kevin Moran,et al.  Automating Software Development for Mobile Computing Platforms , 2018, 2018 IEEE International Conference on Software Maintenance and Evolution (ICSME).

[39]  Haruto Tanno,et al.  Support for Finding Presentation Failures by Using Computer Vision Techniques , 2018, 2018 IEEE International Conference on Software Testing, Verification and Validation Workshops (ICSTW).

[40]  Claire Le Goues,et al.  A systematic study of automated program repair: Fixing 55 out of 105 bugs for $8 each , 2012, 2012 34th International Conference on Software Engineering (ICSE).

[41]  Zhenchang Xing,et al.  Domain-specific machine translation with recurrent neural network for software localization , 2019, Empirical Software Engineering.

[42]  Dawei Qi,et al.  SemFix: Program repair via semantic analysis , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[43]  Denys Poshyvanyk,et al.  Detecting and Summarizing GUI Changes in Evolving Mobile Apps , 2018, 2018 33rd IEEE/ACM International Conference on Automated Software Engineering (ASE).

[44]  Hung Viet Nguyen,et al.  Auto-locating and fix-propagating for HTML validation errors to PHP server-side code , 2011, 2011 26th IEEE/ACM International Conference on Automated Software Engineering (ASE 2011).

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

[46]  Hoan Anh Nguyen,et al.  Recurring bug fixes in object-oriented programs , 2010, 2010 ACM/IEEE 32nd International Conference on Software Engineering.

[47]  Jaechang Nam,et al.  Automatic patch generation learned from human-written patches , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[48]  Hans-Peter Kriegel,et al.  A Density-Based Algorithm for Discovering Clusters in Large Spatial Databases with Noise , 1996, KDD.

[49]  William G. J. Halfond,et al.  Root cause analysis for HTML presentation failures using search-based techniques , 2014, SBST 2014.

[50]  Wolfgang Slany,et al.  Automated Bidirectional Languages Localization Testing for Android Apps with Rich GUI , 2016, Mob. Inf. Syst..

[51]  William G. J. Halfond,et al.  Finding HTML presentation failures using image comparison techniques , 2014, ASE.

[52]  Andrea Everard,et al.  How Presentation Flaws Affect Perceived Site Quality, Trust, and Intention to Purchase from an Online Store , 2005, J. Manag. Inf. Syst..

[53]  Phil McMinn,et al.  Automatic Detection of Potential Layout Faults Following Changes to Responsive Web Pages (N) , 2015, 2015 30th IEEE/ACM International Conference on Automated Software Engineering (ASE).

[54]  Emina Torlak,et al.  Automated reasoning for web page layout , 2016, OOPSLA.

[55]  Martin Monperrus,et al.  Fully Automated HTML and Javascript Rewriting for Constructing a Self-Healing Web Proxy , 2018, 2018 IEEE 29th International Symposium on Software Reliability Engineering (ISSRE).

[56]  Tao Xie,et al.  Locating need-to-translate constant strings in web applications , 2010, FSE '10.

[57]  Atif M. Memon,et al.  Studying the Characteristics of a "Good" GUI Test Suite , 2006, 2006 17th International Symposium on Software Reliability Engineering.

[58]  Jun Wei,et al.  Detect Cross-Browser Issues for JavaScript-Based Web Applications Based on Record/Replay , 2016, 2016 IEEE International Conference on Software Maintenance and Evolution (ICSME).

[59]  Phil McMinn,et al.  Automatic Visual Verification of Layout Failures in Responsively Designed Web Pages , 2019, 2019 12th IEEE Conference on Software Testing, Validation and Verification (ICST).

[60]  William G. J. Halfond,et al.  Using Visual Symptoms for Debugging Presentation Failures in Web Applications , 2016, 2016 IEEE International Conference on Software Testing, Verification and Validation (ICST).

[61]  Paolo Tonella,et al.  Pesto: Automated migration of DOM‐based Web tests towards the visual approach , 2018, Softw. Test. Verification Reliab..

[62]  Vitaly Shmatikov,et al.  Fix Me Up: Repairing Access-Control Bugs in Web Applications , 2013, NDSS.

[63]  Phil McMinn,et al.  Automated layout failure detection for responsive web pages without an explicit oracle , 2017, ISSTA.

[64]  Ali Mesbah,et al.  AutoFLox: An Automatic Fault Localizer for Client-Side JavaScript , 2012, 2012 IEEE Fifth International Conference on Software Testing, Verification and Validation.

[65]  Claire Le Goues,et al.  Automatically finding patches using genetic programming , 2009, 2009 IEEE 31st International Conference on Software Engineering.

[66]  Florian N. Egger,et al.  "Trust me, I'm an online vendor": towards a model of trust for e-commerce system design , 2000, CHI Extended Abstracts.

[67]  Christof Lutteroth,et al.  ORC Layout: Adaptive GUI Layout with OR-Constraints , 2019, CHI.

[68]  Bogdan Korel,et al.  Automated Software Test Data Generation , 1990, IEEE Trans. Software Eng..

[69]  Tao Xie,et al.  Automating presentation changes in dynamic web applications via collaborative hybrid analysis , 2012, SIGSOFT FSE.