官網位址：http://www.protractortest.org/
1. 預備環境
protractor 是一個 node.js 程式，為了運作 protractor ，你首先需要 node 環境。你還應該檢查一下 node 的版本，它應該在 v0.10.0 以上。
node 中附帶了 npm 包管理工具，通過 npm 可以下載下傳和安裝 protractor。
預設情況下，protractor 使用 jasmine 作為測試架構。下面的内容将使用 jasmine 進行， jasmine 的目前版本是 2.3，我們将使用這個版本。
我們還将使用本地的獨立 selenium 伺服器來控制浏覽器，你需要安裝 java development kit (jdk) 來運作它，通過執行下面的指令來檢查 java 是否正确安裝。
2. 安裝 protractor
使用 npm 進行全局安裝。
這将會安裝兩個工具：<code>protractor</code> 和 <code>webdriver-manager，</code> 先運作一下 protractor --version 确認可以正常工作。
webdriver-manager 用來幫助我們擷取 selenium server，但是， 你可能會遇到網絡錯誤。
我這裡執行的結果是這樣的。
可以看到，實際上需要下載下傳兩個檔案：selenium-server-standalone-2.45.0.jar 和 chromedriver_win32.zip ，這兩個檔案分别是 selenium 獨立伺服器和 chrome 的驅動。
淘寶提供了鏡像位址，我們可以修改一下 webdriver-manager，通過淘寶來下載下傳。
首先找到你的 webdriver-manager 檔案，它應該在 c:\users\your_account\appdata\roaming\npm\node_modules\protractor\bin 中，找到第 34 行，修改為淘寶的 selenium 位址。
再找到第 46 行，修改為
重新執行 webdriver-manager update 就可以下載下傳了。
下載下傳之後，儲存到哪裡呢？直接執行一下 webdriver-manager，可以看到如下的輸出。
這裡給出了預設的儲存位址。
成功下載下傳之後，啟動伺服器檢查一下。
這将會啟動 selenium 伺服器，控制台也會輸出一些日志資訊.
我們的 protractor 測試将會把測試請求發送到這個伺服器，通過它來控制本地的浏覽器進行測試，在我們的整個教程中，保持這個伺服器的運作，在下面的位址，你可以看到關于伺服器狀态的資訊。
3. 演練
保持上面的指令行視窗運作，重新打開另外一個指令行視窗，建立一個用于測試的幹淨檔案夾。
protractor 需要兩個檔案來運作測試，一個測試規範檔案，一個配置檔案。
讓我們從示例的 angularjs 應用開始寫一個簡單的測試，我們使用位于 http://juliemr.github.io/protractor-demo/ 的超級電腦應用，測試将檢查頁面的 title 是否符合我們的預期。
複制下面的代碼到 spec.js 檔案中。
describe 和 it 是 jasmine 測試架構的文法格式。browser 是通過 protractor 建立的全局變量。它用于浏覽器範圍的指令控制，比如通過 browser.get 進行導航。
現在，我們建立配置檔案，複制一下代碼到 conf.js 中。
配置檔案中描述了到何處定位測試規範檔案 (specs )，selenium 伺服器的位址 (seleniumaddress)， 還說明了我們将會使用 jasmine 版本 2 作為測試架構。其它配置這裡使用預設的配置，chrome 是預設的浏覽器。
現在執行測試。
你應該看到自動打開了一個 chrome 浏覽器，然後導航到超級電腦應用位址，然後，浏覽器自動關閉 (這應該非常快 )。測試的輸出應該是
祝賀你，我們已經運作了第一個 protractor 測試。
這一次，我們修改一下測試來與頁面中的元素進行互動，将 spec.js 修改為如下内容。
這裡，我們使用全局的 element 函數和 by 對象，它們也是 protractor 建立的函數，element 函數用來在頁面中定位 html 元素，函數傳回一個 elementfinder 對象。可以通過這個對象與頁面元素進行互動或者擷取資訊。在這個測試中，我們使用了 sendkeys 在 input 元素中輸入内容，click 函數來模拟點選按鈕，gettext 擷取元素的内容。
element 需要一個參數，一個選擇器參數，用來描述如何找到元素，by 對象用來建立選擇器，這裡我們使用了三種類型的選擇器。
by.model('first') 通過 ng-model='first' 來定位元素。如果你檢視 calculator 頁面的源碼，你會看到 <code><input type=text ng-model="first"></code>.
by.id('gobutton') 通過指定的 id 來定位元素，比如 <button id="gobutton"> .
by.binding('latest') 定位綁定的變量 latest，比如這裡的 {{latest}}
執行這個測試。
你應該看到頁面中輸入了兩個數字，等待結果顯示出來。由于結果是 3 ，而不是 5，我們的測試失敗。修複這個測試，然後重新運作它。
我們将兩個測試放在一起，如下修改 spec.js
這裡，我們把導航移到了 beforeeach 中，這個函數會在每一個 it 塊之前執行。我們還把 elementfinder 儲存在變量中進行共享使用。
我們已經寫了一些測試，現在來看看配置檔案。在配置檔案中，我們可以配置使用什麼浏覽器，如何連接配接到 selenium 伺服器等等，先改變一下我們使用的伺服器。
重新運作測試，你會看到測試運作在 firefox 中而不是原來的 chrome。capabilities 對象描述了測試使用的浏覽器。各種配置參數，參見：the reference config file.
還可以同時在多個浏覽器上運作測試，例如。
重新運作，你會看到測試運作在 chrome 和 firefox 浏覽器中。
我們回到測試，把配置檔案也調整為僅使用一個浏覽器。
有的時候，我們需要處理一組元素 ，可以使用 element.all，它會傳回 elementarrayfinder。在 calculator 中，任何操作都被記錄在 log 中。這是使用 ng-repeat 生成的表格實作的。
我們先進行一系列操作，然後測試它們出現在 log 曆史記錄中，修改 spec.js 如下。
我們做了許多事，首先，建立了一個 helper 函數 add。還有一個變量 history。我們通過 by.repeater 使用 element.all 來得到 elementarrayfinder。在我們的測試中，我們使用 count 方法來斷言期望的長度。修改測試以便通過第二個測試。
除了 count 之外，elementarrayfinder 還提供了許多方法，讓我們使用 last 來獲得最後一個元素的 elementfinder ，修改測試。
由于 calculator 在最後報告最早的結果，最早的計算 (1 + 2) 會出現在最後。我們使用 jasmine 的 tocontain 斷言來檢查 "1 + 2" ，元素的文本内容中還包含了時間戳和計算結果。
修複這個測試，正确地期望在第一個曆史記錄中包含了 "3 + 4"。
elementarrayfinder 還提供了方法 each, map, filter 和 reduce 等等模拟 javascript 的數組方法，詳見： read the api for more details.