前陣子去Techday時聽這堂課時" DEV 204 使用 AngularJS 在 ASP.NET 專案上開發企業水準的應用 ” ,講師有提到使用Protractor來作前端的單元測試,但他沒介紹如何使用….=.=,為了一解心中疑惑,Survey相關教學後,將相關使用環境、方式整理如下: 什麼是Protractor 它是AngularJs專門用來作前端測試的工具,透過nodejs上的selectium,執行chrome、fiirefox、IE等瀏覽器,來模擬使用者操作行為並驗證你撰寫好的AngularJs程式是否正確。 執行環境 AngularJs: 測試的網頁一定要內含AngularJs,否則會出現沒有Angular的錯誤 ,修正:可以使用browser.driver來撰寫 Java Runtime:selectium的執行環境 http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html NodeJs:Protractor的執行環境 撰寫測試程式 index.html 此檔案會用來測試回應的title index.spec.js 單元測試 程式,如下為使用browser物件執行index.html並取回title作比對是否為預期值 ps:最外頭的describe為描述測試方法的內容 protractor.conf.js 單元測試程式的 定義檔 ,1.baseUrl:指定測試的Url,2.specs指定要測試哪些檔案,如下圖指定spec目錄下所有副檔名為.spec.js的檔案 套件安裝 執行nodejs command prompt 1.protractor安裝 npm install -g protractor 2.webdriver更新 selectium webdriver-manager update ps:for chrome v54的driver 更新 webdriver-manager update --standalone true --versions.chrome 2.24 執行測試 1.