跳至主要內容
  • 價格資料庫
  • 隱私權條款, 其他說明

LaLa 魔方

玩技術, 玩網頁!!
  • 首頁
  • lego
  • Protractor – 環境設定篇
lego、技術文章
2019-08-26

Protractor – 環境設定篇

 

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:

 

 

 

※ 延伸閱讀:

轉載文章 – Protractor – 環境設定篇

Related Posts

  • Protractor – 實戰篇 – Config File
  • Protractor 環境躍進篇 (4.0.10)
  • Protractor – 實戰篇 – the last puzzle piece
  • Protractor – 實戰篇 – Page Objects
  • navigator feature extend which could detect element in viewport or notnavigator feature extend which could detect element in viewport or not
  • 淺談 Protractor 的「力」與「美」
CUCUMBERJSNODENPMPROTRACTOR

文章導覽

上一篇文章
下一篇文章

近期文章

  • Google Rich Results will replace Structured Data Testing Tool
  • 寶可夢繽紛咖啡店 , 免費遊戲又來了
  • 天天 100 次跳繩挑戰, 健身環的另一種選擇
  • PHP Connect Mysql 8 Issue
  • GraphQL schema 學習筆記

瀏覽數

  • 燦坤快3網路商城-燦坤實體守護,挑選3C家電產品、打造智慧生活好選擇 - 68,166 views
  • 我是超級大壞蛋——MEGA BLOKS 美高 小黃人 CNF60 超級大壞蛋的噴氣機_開箱曬物_什麼值得買 - 22,396 views
  • 一不小心落坑裡:LEGO 樂高 76023 Tumbler 蝙蝠車電影版開箱_開箱曬物_什麼值得買 - 13,688 views
  • How to checkout tag with Git or checkout branch with Git - 11,333 views
  • 樂高lego入坑記 | 曬曬我的樂高收藏_DIY樂高展示櫃_什麼值得買 - 11,054 views
  • Google Rich Results will replace Structured Data Testing Tool - 9,129 views
  • Accelerated Mobile Pages (AMP) 實戰守則 - 8,412 views
  • Google pagespeed 分數超低 被恥笑.. 改進方案 - 8,318 views
  • 宜蘭新景點 - 積木博物館Brick Ark Museum 必看積木版清明上河圖,小小兵軍團壓境 - 7,529 views
  • 停止不了的樂高生涯 LEGO 樂高 好朋友系列 新湖城食品店_開箱曬物_什麼值得買 - 6,579 views

彙整

  • 2020 年 7 月
  • 2020 年 6 月
  • 2020 年 1 月
  • 2019 年 8 月
  • 2019 年 7 月
  • 2018 年 12 月
  • 2018 年 3 月
  • 2018 年 2 月
  • 2017 年 12 月
  • 2017 年 11 月
  • 2017 年 9 月
  • 2017 年 8 月
  • 2017 年 7 月
  • 2017 年 6 月
  • 2017 年 5 月
  • 2017 年 4 月
  • 2017 年 3 月
  • 2017 年 2 月
  • 2017 年 1 月
  • 2016 年 7 月
  • 2016 年 6 月
  • 2016 年 5 月
  • 2016 年 4 月
  • 2016 年 3 月
  • 2016 年 2 月
  • 2016 年 1 月

分類

  • AMP
  • laravel
  • lego
  • switch
  • 技術文章
  • 未分類

搜尋

LaLa 魔方

玩技術, 玩網頁!!
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
LaLa 魔方
  • 價格資料庫
  • 隱私權條款, 其他說明