[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載入模組設定
image

撰寫 Page Object

1.新增caculatorPage.ts 重點如下
  • 將元素變成全域屬性,這樣在其他方法都可以使用
  • 將瀏覽該網頁封裝方法open()
  • 將計算所需的輸入封裝方法caculate
image

2.新增測試腳本caculator-spec-page-object.ts 重點如下:
  • 注入PageObject :import app=require(相對檔案路徑)
  • 本來直接使用element(by..),改使用pageObject提供的方法、屬性來操作
image

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

Summary

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


相關參考

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

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS