[AngularJs] Protractor-Page Object 實作

  一開始在撰寫測試腳本並不會去考慮reuse這件事，但隨著測試腳本開始變多、變複雜時，就會看到要測同一支程式，但相同的語法散落在不同的腳本。例:a-spec.js與b-spec.js有一大段是輸入表單值的部份。幸好根據此問題，在網路有蠻多篇介紹使用Page Object Pattern的撰寫方式來解決。本文會介紹如何在Visual Studio 2013 如何實作此Pattern。

開發工具設定

Visual Studio的TypeScript Module System需要設定為CommonJs，此為NodeJs載入模組設定

撰寫 Page Object

1.新增caculatorPage.ts 重點如下

• 將元素變成全域屬性，這樣在其他方法都可以使用
• 將瀏覽該網頁封裝方法open()
• 將計算所需的輸入封裝方法caculate

2.新增測試腳本caculator-spec-page-object.ts 重點如下:

• 注入PageObject :import app=require(相對檔案路徑)
• 本來直接使用element(by..)，改使用pageObject提供的方法、屬性來操作

下圖為caculator-spec.ts跟上圖作比較

Summary

透過Page Obejct Patten的撰寫方式，雖然在撰寫上會比原本要複雜點，但可以提高測試程式的 reuse及更方便管理，個人覺得是很值得的。
範例下載:Github

相關參考

http://jagodevreede.blogspot.tw/2014/03/writing-page-objects-for-angularjss.html