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

Abstract

Summary Companies often employ (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 the website. 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 labour 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.

Nighthawk: Fully Automated Localizing UI Display Issues via Visual Understanding

“…The XFix [81] repaired layout Cross Browser Issues (XBIs) presentation failures arising from the inconsistencies in the rendering of a website across different browsers. Additionally, IFIXCC [82] repaired internationalization failures using search-based and clustering techniques, while CBRepair [83] addresses the same types of failures but using constraint solving. Althomali et al [84] presented an automated approach that extracts the responsive layout of two versions of a page and compares them, alerting developers to the differences in layout that they may wish to investigate further.…”

Woodpecker: Identifying and Fixing Android UI Display Issues

“…Except for Android issue, research in Web UI [8,12,[30][31][32][33][34] compared the differences between current UI and oracle UI for bug detection, and use the search-based method to repair them. However, Android UI has a more complex rendering mechanism, which can't modify CSS to repair bugs and check the correctness in real time like Web UI.…”

Automated visual classification of DOM‐based presentation failure reports for responsive web pages

“…For instance, MFix repairs problems with the mobilefriendliness of a web page [43], while XFIX repairs cross-browser issues [44,45]. Additionally, IFIX [46] and its successor, IFIX CC [47], repair internationalization failures using search-based and clustering techniques, while CBRepair addresses the same types of failures but using constraint solving [48]. Finally, Li et al proposed an approach that first analyses a person's interaction with a web page and then visualizes some presentation failures that might be evident to a human [9].…”