臺灣博碩士論文加值系統

許多網頁系統的開發，在考慮到互動性與效能的情況下，常常需結合JavaScript的程式撰寫。使用一般Web GUI 的測試，通常不能完整測試JavaScript程式，以及JavaScript和Server端的完整互動。
在本文中，我們提出以活動圖(Activity Diagram)來描述測試流程，並自動化產生測試腳本之系統，我們的活動圖有兩種Node， 第一種Node負責描述操作Web GUI與其流程，而第二種Node負責描述JavaScript Unit Test 。程式根據以上兩種Node所描述出來的BPMN檔案轉換成Web GUI 自動化測試碼與JavaScript Unit Test 測試檔，並且可以利用不同的瀏覽器來執行測試，可以幫助確認網頁功能是否正常。

When developing web-based systems, JavaScript is commonly used because of efficiency and user interaction consideration. However, it is difficult to test Javascript and its interaction with Server completely.
In this thesis, we proposed to use Activity Diagram to model the testing process of a web-based application. Our Activity Diagram consists of two kinds of nodes, one kind of node is used to describe Web GUI test, another kind of node specifies JavaScript unit test. Our test system will read the XML file to generate code for Web GUI test and code for JavaScript unit test, which can be executed on browsers to test the system functions.

目錄

摘要 I
Abstract II
目錄 III
圖形目錄 V
第一章 簡介 1
第二章 背景知識 4
2.1以Activity Diagram 測試Web UI 4
2.2 Activiti Designer 5
2.3 YUITest 6
2.4 Selenium WebDriver 10
第三章 JavaScript Unit Test 11
3.1 JavaScript單元測試的困難點 11
第四章 系統設計與功能 14
4.1 系統流程與架構 14
4.2 WEB GUI結合Javascript單元測試工具 15
4.3 Activity Diagram 17

第五章 系統流程與實作 20
5.1 系統架構 20
5.2 使用工具 26

5.3 範例測試與操作流程說明 27
5.4 範例測試結果 36


第六章 結論及未來展望 37
參考文獻 38

圖形目錄

圖 1使用 Violet UML Editor 繪製Activity Diagram 撰寫網頁測試腳本 4
圖 2使用Activiti Designer 設計Activity Diagram 5
圖 3待測之範例JavaScript function與YUITest範例測試碼 7
圖 4 YUITest範例測試結果 8
圖 5執行 Google Chrome 瀏覽器之C# 寫法 10
圖 6執行 Internet Explorer 瀏覽器之 C# 寫法 10
圖 7帶入Dom Tree至YUI Test 12
圖 8自動化系統測試架構 14
圖 9 WEB GUI結合Javascript 單元測試工具 16
圖 10描述Web GUI操作流程 Node與其表單填寫畫面 18
圖 11描述JavaScript Unit Test Node與其表單 19
圖 12 WEB GUI結合Javascript單元測試工具系統執行流程 20
圖 13 Activity Diagram Node 內容之XML 21
圖 14裝載分析過後的Activity Diagram Node 內容的物件之class 21
圖 15 WebGUI Node 內容之XML 22
圖 16將List內裝載之物件內容轉換成 C# 語法的Selenium WebDriver 部分測試碼1 22

圖 17將List內裝載之物件內容轉換成 C# 語法的Selenium WebDriver 部分測試碼2 23
圖 18產生YUI Test 測試檔示意圖 24
圖 19 JavaScript Unit Test Node 內容之XML 24
圖 20產生YUI Test 測試檔程式碼 25
圖 21描述測試範例民宿網的Activity Diagram 27
圖 22點擊房型頁面之Activity Diagram 28
圖 23測試房型頁面之Activity Diagram 29
圖 24測試相簿頁面之Activity Diagram 29
圖 25測試活動頁面之Activity Diagram 30
圖 26 WEB GUI結合Javascript單元測試工具頁面 30
圖 27執行操作的步驟後的頁面局部 31
圖 28描述測試範例民宿網的局部Activity Diagram 32
圖 29 JavaScript Unit Test Node填寫內容 33
圖 30根據JavaScript Unit Test Node填寫內容所產生之JavaScript 單元測試碼 33
圖 31 YUI Test的測試碼結合待測頁面Dom Tree內容之執行結果 34
圖 32 Web GUI Test Node填寫內容 34
圖 33根據Web GUI Test Node填寫內容所產生之C# 語法的Selenium WebDriver 測試式碼 34
圖 34 Chrome瀏覽器執行結果 36

[1]SeleniumHQ, May 2013. http://docs.seleniumhq.org/
[2]Sahi, May 2013. http://sahi.co.in/
[3]AutoIt, July 2013. http://www.autoitscript.com/site/autoit-script-editor/
[4]Sikuli, September 2013. http://www.sikuli.org/
[5]Jsunit, January 2001. http://www.jsunit.net/
[6]YUITest,November2010. http://yuiblog.com/blog/2010/11/09/introducing-the-new-yui-test/
[7]BPMN, June 2013. http://www.bpmn.org/
[8]Activiti Designer - Extending Activiti Designer, March 2014. http://activiti.org/userguide/index.html#eclipseDesignerExtending
[9]YUITestAssertions,November2010, http://yuilibrary.com/yui/docs/test/#assertions
[10]Selenium WebDriver, January 2014. http://docs.seleniumhq.org/docs/03_webdriver.jsp
[11]http://218.161.43.175:221/民宿網, March 2015.
[12]尤冠文, “應用Sahi自動化測試工具來自動化測試BPMN應用系統,中原大學資訊工程學系碩士學位論文, July 2013.
[13]陳佑任, “使用Activity_Diagram撰寫網頁測試腳本系統之設計,” 中原大學資訊工程學系碩士學位論文, July 2013.
[14]李易安, “客製自動化XML測試腳本：以Activity Diagram為例”中原大學資訊工程學系碩士學位論文, July 2014.
[15]Artzi, S. ,Dolby, J. , Jensen, S.H. , Moller, A. , Tip, F., “A framework for automated testing of JavaScript web applications”, 33rd International Conference on Software Engineering 2011 , Pages: 571- 580

[16]Negara,N. and Stroulia, E., “Automated Acceptance Testing of JavaScript Web Applications”, 19th Working Conference on Reverse Engineering 2012 , Pages: 318- 322
[17]Jsunit basic asynchronous-setUpPages, January 2001
http://dig.csail.mit.edu/2005/ajar/ajaw/test/jsunit/tests/jsUnitTestSetUpPages.html
[18]YUITest Asynchronous Testing November 2010.
http://yuilibrary.com/yui/docs/test/test-async-test.html