[AngularJs] Protractor實用套件整理

這陣子在Survery前端e2e測試的一些撰寫方式及輔助套件,將一些實用的記錄下來,以便日後查詢。

開發及測試環境

  • 使用NodeJS作測試
  • Visual Studio 2013+TypeScript撰寫測試Script

 

Visual Studio 套件

  1. 新增一個Web 空專案
    image
  2. 安裝protractor的TypeScript套件
    • angular-protractor: browser、element、by.model、by.binding 等語法支援
    • jasmine : BDD測試Script,例: descript( """) it(“’….”)
    • image

NodeJS套件

  1. 執行NodeJs Commad,並切換到專案目錄,執行npm init 初始化package.json,過程會要你輸入相關資訊,按照預設值可以一路按enter,此檔案會建立專案資訊及記錄相依套件 。

    npm init

    image
  2. 安裝測試套件protractor

    npm install -g protractor
  3. 更新webdriver

    webdriver-manager update
  4. 安裝jasmine-reporters,此套件可以幫助你將測試結果輸出到目錄

    npm install jasmine-reporters --save-dev

建立Protractor 組態設定

protractor 參考jasmine-reporters 參考

image

撰寫測試程式

1.直接引用官方範例,在spec目錄下新增caculator-spec.ts的TypeScript檔案

image

2.執行測試

protractor protractor-conf.js

執行後會啟用chrome瀏覽到測試網頁,並輸入1跟2後送出,再驗證結果是否相符

image

3.測試結果

image

輸出到目錄的xml檔案

image

範例下載:Github

相關參考


http://ramonvictor.github.io/protractor/slides/#/

https://angular.github.io/protractor/#/tutorial

https://github.com/larrymyers/jasmine-reporters

這個網誌中的熱門文章

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

[TFS] 分支與合併