網路應用程式進行國際化翻譯時可能會引發各種錯誤，其中一種為沒有為文本預留空間，這種錯誤結果會因為翻譯頁面之後，字詞的延伸或是縮短而導致網頁佈局上的失敗，使得頁面上的文本變得難以閱讀，或是一些功能不能使用。如果前端開發人員需要避免這個問題，就必須將國際化需求納入考量，但是驗證國際化佈局的工具不多，而如果要進行回歸測試更是考驗前端開發人員細心的程度，這些原因使得國際化時需要額外花費不少時間在確認佈局上。
本論文提供一個自動化偵測國際化佈局失敗的工具，可以視覺化佈局錯誤的地方，讓前端開發人員可以根據這些資訊來驗證國際化翻譯後網頁是否正確以及觀察頁面設計不足的地方，同時也可以做為重構國際化功能後回歸測試的依據。

Various errors can occur when the web application is internationalized. One main cause of them is not to reserve space for the translated text. This error leads to the failure of the page layout due to the lengthening or shortening of texts after translation, making the texts become difficult to read, or some functions become unavailable. To avoid this problem, front-end developers must take internationalization into account. Without tool support for checking, the developers will need to take extra time to confirm the layout after internationalization.
This thesis provides a tool for automatically detecting the failure of internationalization layouts. It can help front-end developers visualize large changes or even errors in the layout, so that they can use the information to improve web page layout design. The tool can also be used for regression testing.

摘要 i
ABSTRACT ii
誌 謝 iii
目 錄 iv
表目錄 vii
圖目錄 viii
第一章 緒論 1
1.1 研究背景與動機 1
1.2 研究目標 1
1.3 論文組織架構 3
第二章 背景知識 4
2.1 相關研究 4
2.1.1 國際化 4
2.1.2 國際化時常見的錯誤 4
2.1.3 Detecting and Localizing Internationalization Presentation Failures in Web Applications 9
2.2 使用工具 10
2.2.1 Selenium Web driver 10
2.2.2 Spatial-index-java 11
2.2.3 Rtree 12
2.2.4 Levenshtein distance 12
2.2.5 Confusion matrix 13
2.2.6 F1 score 13
第三章 方法設計與實作 14
3.1 系統架構 14
3.2 實作細節 18
3.2.1 BuildNodeByWebElementUseCase 18
3.2.2 Domain objects 21
3.2.3 比較標準網頁和國際化翻譯網頁元素關係變化 24
3.2.3.1 IsMatchDOMTree 25
3.2.3.2 BuildComparisionRelationship 27
第四章 實驗結果 29
4.1 k值對IPF影響之實驗 29
4.1.1 實驗介紹 29
4.1.2 實驗設計 29
4.1.3 實驗分析 34
4.2 與Fighting-layout-bugs比較結果輸出 35
4.2.1 Fighting-layout-bugs 35
4.2.2 輸出結果 36
4.2.3 結果分析 39
4.3 與AShot比較結果輸出 40
4.3.1 AShot 40
4.3.2 輸出結果 40
4.3.3 結果分析 41
第五章 結論與未來研究方向 42
5.1 結論 42
5.2 未來研究方向 42
參考文獻 43

[1] “Sideex” [Online]. Available:https://sideex.io/
[2] ” Robot Framework” [Online]. Available:https://robotframework.org/
[3] ”Selenium” [Online]. Available:https://www.selenium.dev/selenium-ide/
[4] “Jasmine” [Online]. Available:https://jasmine.github.io/
[5] “Rtree” [Online]. Available:http://www.mathcs.emory.edu/~cheung/Courses/554/Syllabus/3-index/R-tree.html
[6] “K-NN algorithm” [Online]. Available:https://www.saedsayad.com/k_nearest_neighbors.htm
[7] “Levenshtein distance” [Online]. Available:https://commons.apache.org/proper/common-text/apidocs/org/apache/commons/text/similarity/LevenshteinDistance.html
[8] “Internationalization” [Online]. Available:https://www.w3.org/standards/webdesign/i18n#examples
[9] “10 Common Mistakes in Software Localization and How to Avoid Them” [Online]. Available:https://phrase.com/blog/posts/10-common-mistakes-in-software-localization/
[10] “國立故宮博物院” [Online]. Available:https://www.npm.gov.tw/
[11] 楊子冊.(2019). 於網路應用程式之前端動態翻譯多國語言=Dynamically translate multiple languages at the front end of web application
[12] “Angular translate” [Online]. Available:https://angular-translate.github.io/
[13] ”Google translate API” [Online]. Available:https://www.w3schools.com/HOWTO/howto_google_translate.asp
[14] “Mixi.jp” [Online]. Available:https://mixi.jp/
[15] Abdulmajeed Alameer, Sonal Mahajan and and William G. J. Halfond, ”Detecting and Localizing Internationalization Presentation Failures in Web Applications,” 2016 IEEE International Conference on Software Testing, Verification and Validation (ICST)
[16] “Spatial-index-java” [Online]. Available:http://jsi.sourceforge.net/
[17] “Hamming distance” [Online]. Available:https://sciencing.com/how-to-calculate-hamming-distance-12751770.html
[18] Shauvik Roy Choudhary, Husayn Versee and Alessandro Orso, “WEBDIFF: Automated identification of cross-browser issues in web applications,” 2010 IEEE International Conference on Software Maintenance
[19] “ISO-639” [Online]. Available:https://www.iso.org/iso-639-language-codes.html
[20] “U. Lall and A. Sharma, "A nearest neighbor bootstrap for resampling hydrologic time series", Water Resour. Res., vol. 32, no. 3, pp. 679-693, 1996.”
[21] Shichao Zhang , Xuelong Li, Ming Zong, Xiaofeng Zhu and Ruili Wang , “Efficient kNN Classification With Different Numbers of Nearest Neighbors,” IEEE Transactions on Neural Networks and Learning Systems
[22] “GWALI” [Online]. Available:https://sites.google.com/site/gwaliproject
[23] “Fighting-layout-bugs” [Online]. Available:https://code.google.com/archive/p/fighting-layout-bugs/
[24] “AShot” [Online]. Available:https://github.com/pazone/ashot
[25] “待測網頁” [Online]. Available:https://github.com/he89302/test_web_page
[26] “W3C International” [Online]. Available:https://www.w3.org/International/techniques/authoring-html#style
[27] ”eBay” [Online].Available:https://www.ebay.com/b/Apple-Cell-Phones-Smartphones/9355/bn_319682
[28] ”New york times” [Online].Available:https://www.nytimes.com/
[29] ”Natural history museum of Utah” [Online].Available:https://nhmu.utah.edu/
[30] ”Facebook” [Online].Available:https://www.facebook.com/