Protractor 是一款 end-to-end test framework. 什麼是 end-to-end test 呢?! 簡單的說它可以模擬 user 在 browser 上操作的所有行為(近乎 100%), 進而測試頁面 flow 是否順暢? JavaScript 各 module 是否運作正常? 如果寫得好的話, 取代傳統的人工測試使之進化到全自動化測試也不再是件遙不可及的夢想。
Protractor 基本上是因應 AngularJS 所衍生出來的的 end-to-end test framework. 所以它對於 AngularJS based 的 application 提供了最佳的支援, 就連 「protractor」這個詞彙也非常的有意思, 它就是「量角器」的意思, 如同它和 AnjularJS 的關係一般, 它就是專門在量「角度」。雖然說它和 AngularJS 有這樣子的關係, 但是並不表示說它無法測試 non AngularJS application 喔! 不僅如此, 它對於一般 JavaScript testing 也是得心應手喔!
Protractor 的運作如下圖所示, 它本身包覆著 WebDriverJS, 藉由著 WebDriverJS 與 Selenium Server 溝通, 再由 Selenium Server 將之詮釋成各種 browser 行為來模擬 user 的動作。
[Test Scripts] < ———— > [Selenium Server] < ———— > [Browser Drivers]
Protractor 可以搭配的 behavior driven development(BDD) framework 分別有 Jasmine(default)、Mocha 以及 Cucumber, 我這裡所撰寫的 testing code 是 base 在 Cucumber 上, 因此以下將介紹如何設定 Protractor 以及 Chumber.
簡單介紹一下 Cucumber 好了, Cucumber 所包含的檔案分別為 feature, step definition 以及 hook. 藉由這三類型檔案彼此的融合與發酵, 便蹦出無比精彩的火花
feature 的寫法如下, 檔案 ext 為 .feature, 每個 scenario 分別由 Given / When / Then 所組成, 它的描述應為自然語言, 用最簡單的口語與描述來表達我們所要的需求以及驗收, 儘量讓看到該 feature 的所有人都能輕易的了解該 scenario 所要闡述的前因以及後果。
- Given: 狀態的描述, 上圖表示說訪問 seller_pp_b2c 這傢伙的 booth page(賣場頁)
- When: 通常為作了什麼樣的動作, 上例表示作了以 “mei” 這個關鍵字的搜尋
- Then: 基本上 Then 所揭露的便是期待了, 基本上會接在 When 的後方, 比方說作了什麼樣的動作便會有什麼樣的期待. 上例表示說搜尋結果的筆數應該要大於一筆
當然寫好 feature 後, testing 並不會就自動完成, 這時候我們需要撰寫 step definition, 用來對每一個 step 作詮釋, Protractor 所提供的相關 API 便是應用在該檔案, 由於 step definition 的撰寫非本篇的主題, 所以暫時略過, 待日後其他分享再作詳解
接下來要進入本篇的重頭戲了, 如何在自己本機架設基本的環境呢?! 筆者本身的 OS 為 windows 7, 所以以下截圖均是 win 7 為基底.
※ 安裝 node.js
前往 node.js 官網, 並且下載相關的安裝程式, 雙擊該檔案依照 default 安裝設定進行安裝即可
node.js download page: http://nodejs.org/download/
※ 安裝 Java Development Kit (JDK)
前往 Java 官網, 並且下載相關的安裝程式, 雙擊該檔案依照 default 安裝設定進行安裝即可
JDK download page: http://www.oracle.com/technetwork/java/javase/downloads/index.html
※ Environment Variables setting
開啟 windows 系統設定, 來進行環境變數的設置, 若略過此設定, 則 node.js 相關 module 可能因此造成找不到路徑的窘境.
先新增 NODE_PATH 這個變數, 內容為 node.js npm 安裝 module 的 default 路徑, 理論上沒改設定的話應該會在 C:UsersmeiAppDataRoamingnpmnode_modules
接下來編輯 PATH 這個變數, 將 JDK 安裝後的執行檔路徑 append 上去即可(用 ; 隔開), 理論上沒改設定的話應該會是 C:Program FilesJavajdk1.8.0_25bin
※ 安裝 protractor
請先開啟 Node.js command prompt, 並在該視窗輸入下列指令, 即可自動下載並且將之安裝
npm install -g protractor
安裝完後, 可以試著鍵入 protractor –version 來觀看是否安裝成功, 成功的話, 我們將可順利的觀看到 protractor 當前的版本, 反之, 則請試著重新進行安裝
接著請鍵入 webdriver-manager update 來進行相關更新, 此舉將會更新最新版的 WebDriverJS.
※ 啟動 webdriver-manager
安裝完後, 可以試著鍵入 webdriver-manager start, 來啟動 Selenium Server, 請注意, 往後透過 protractor 進行 testing 之前, 均需要先執行該指令
啟動完成後, 其 default 的 server status page 為 http://localhost:4444/wd/hub, 直接在 browser 鍵入該網址, 應該要可以看到相關的 infomation.
※ 安裝 Cucumber
接下來便是安裝 framework – Cucumber, 一樣的可以透過 npm 來進行下載及安裝, 再開啟 Node.js command prompt 後, 並在該視窗輸入 npm install -g cucumber, 即可自動下載並且將之安裝
※ 安裝 Chai
通常我們會安裝 chai 來讓 assertion 的描述以及應用更加多元, 所以這裏也會建議將之安裝, 僅需鍵入以下兩則 npm 指令即可進行安裝
npm install -g chai
npm install -g chai-as-promised
以上, 便是 Protractor + Cucumber 的環境設置, 至於如何撰寫相關的 test code ? 則請期待下回相關的分享 ^^
※ Reference:
※ 延伸閱讀:
