1. 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

2. 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

3. 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

4. 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

5. Examples of i18n Presentation Failures
Make red boxes wider

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

7. 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

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

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

10. 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

11. 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)

12. 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

13. 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

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

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

16. 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

17. 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

18. Phase 2 - Compare Layout Graphs
Baseline
PUT
Make them

19. 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.

20. 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

21. 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

22. 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

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

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

25. 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 ?

26. 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

27. 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