Detecting and Localizing Internationalization Presentation Failures in Web Applications Abdulmajeed Alameer, Sonal Mahajan and William G. J. Halfond University of Southern California Los Angeles, California, USA Work supported by NSF Grant CCF-1528163

Translation Framework What is i18n? i18n = Internationalization En Translation Framework 中文 Request (Lang = x) हिंदी Webpage Translated Web page Response Resource Files Single item: no need for bullet point Browser Web Server

What are i18n Presentation Failures? i18n presentation failure = an undesired distortion of the page’s intended appearance after translation Success in i18n process: $45 4 stars Hotel Hotel de 4 estrellas MXN 750 Layout of baseline version Layout of translated version

What are i18n Presentation Failures? i18n presentation failure = an undesired distortion of the page’s intended appearance after translation Failure in i18n process: $45 4 stars Hotel Hotel de 4 estrellas MXN 750 Layout of baseline version Layout of translated version

Examples of i18n Presentation Failures Make red boxes wider

Examples of i18n Presentation Failures English version Make red box wider Russian version

Motivation Users make impression about the website in less than 50 ms (Google Study) Presentation of a webpage affects the users impression Test for IPFs  Manually examine each page with each language Automated solution is needed ! Grammar mistakes

Existing Techniques Cross Brower Testing WebSee Fighting Layout Bugs pseudo-localization W3C i18n Checker

Our Approach Filter and Rank Reported Issues Build Compare (Layout Graphs) Compare (Layout Graphs) Not visually appealing

Preliminaries - Layout Graph Definition LG = ( V , F ) is a complete graph V: set of nodes representing the rectangles for every Element or Text that has a visual impact in the page F: edge ↦ set of visual relationships Contains Intersects West V1 V2 say Examples of visual relationships Representing Minimum bounding rectangles.. North North, Right Aligned

Phase 1- Building the Layout Graph (LG) For each element or text in the Baseline and PUT compute the Minimum Bounding Rectangle (MBR) c1 = (x,y) Type: Element / Text Xpath: /html/body/div[1] Step 1: Then c2 = (x,y)

Phase 1- Building the Layout Graph (LG) Layout of baseline version Layout of translated version $45 4 stars Hotel MXN 750 Hotel de 4 estrellas

Phase 1- Building the Layout Graph (LG) ../div/text() ../div ../div/div ../div/div/text() ../img MBRs of baseline version ../div/div/text() ../div/text() ../div ../div/div ../img MBRs of translated version

Phase 1- Building the Layout Graph (LG) Create edges among the MBRs and annotate them Example:

Phase 1- Building the Layout Graph (LG) ../div/text() ../div ../div/div ../div/div/text() ../img Show Math

Phase 2 - Compare Layout Graphs A naive approach: compare the visual relationships for all edges Solution: for each node, compare the node’s “neighbors” which are sub graphs of nodes and edges that are spatially close to the node No need for bullet points

Phase 2 - Compare Layout Graphs Use Spatial DB K-Nearest-Neighbor Queries: ../div/text() ../div ../div/div ../div/div/text() ../img ../div/text() ../div/div ../div/div/text() ../div ../img No need for bullter point

Phase 2 - Compare Layout Graphs Baseline PUT Make them

Phase 3 - Rank and Report Issues Assign a suspiciousness score to every element: Node n score = |relations difference in n’s edges| Sort elements from highest to lowest score Report this list to the developer Numbers instead of bullet point But them together, and make font larger.

Phase 3 - Rank and Report Issues Baseline 1- ../div/div/text() 2- ../div 3- ../div/div Reported List Score = 3 Score = 6 +1 +2 PUT +1 Score = 3 +2

Empirical Evaluation RQ1: What is the accuracy of our technique in detecting failures? RQ2: If a failure is detected, what is the quality of the localization results provided by our technique? RQ3: How fast is our technique in detecting and localizing failures? Larger font size and remove white space

Experimental Protocol Implementation: “GWALI” implemented in Java Compared against: WebSee X-PERT Fighting-Layout-Bugs Subject applications: 30 contained IPFs 24 are error-free Say: Contained a wide range of IPFs Variation of languages, frameworks, complexity

RQ1 - Accuracy No need to repeat the questions Make the graph bigger..

RQ2 – Quality of Localization In 81% of test cases, the faulty elements is ranked 6 or lower

RQ3 – Analysis Time Tool GWALI WebSee X-PERT FLB Avg (s) 10 520 9 Min (s) 6 116 7 Max (s) 36 1640 17 24 Highlight GWALI column ?

Summary Technique for detecting and localizing IPFs: Use Layout Graphs to model web pages Compared Layout Graphs to detect failures Evaluation shows strong results High accuracy Good localization rank Fast

Detecting and Localizing Internationalization Thank You Detecting and Localizing Internationalization Presentation Failures in Web Applications Abdulmajeed Alameer, Sonal Mahajan and William G. J. Halfond University of Southern California Los Angeles, California, USA Work supported by NSF Grant CCF-1528163