有許多原因使我過去不願對自己的應用添加自動化測試。原因之一是不知道其中的效益成本比率，另一個原因是考慮到內建到現有生産環境的應用可能比較難。測試應用而不用從頭重構代碼，僅僅隻是引入測試要怎麼做呢?
首先我們先從簡單區分測試的類型開始。應用測試有很多類型，但最為常見的是單元測試及端對端測試(亦稱為內建測試)。單元測試是測試代碼自身行為的一種測試。在使用者看來什麼也沒有做，但可以確定其方法能達到期望的目的。內建測試是模仿使用者行為的一種測試。比如說，登陸系統，建立文章，退出系統等這些操作都可以自動化，并且你可以用眼睛看到其過程是怎麼發生的。
這兩種類型的測試，它們通常彼此結合使用。對于新的開發來說，這将是理想的。如果時間有限制，或繼承于現有項目的情況下，端對端測試或許比單元測試更加合适。因為我們并不需要過多了解先前的代碼庫，同樣可以覆寫更多場景，這将比單元測試更快，因為單元測試并不測試單個單元而是整個場景。
單元測試依然重要，但如果你必須要在開始的時候選擇一個，我認為端對端測試會是更好的選擇。在這篇文章中，我将測試一個現有的angular 2的待辦事項的項目。我将使用內建測試，并覆寫一系列的場景。
被測試的場景
當應用初始化加載時，有3件待處理的事情
需要加載新待辦事項
點選一個待辦事項，然後跳到待辦事項的詳細頁
删除一個待辦事項
編輯一個待辦事項标題，然後儲存後，可以在首頁的待辦事項清單中看到新标題
不允許儲存一個空的待辦事項，在點了禁用的儲存按鈕後，待辦事項的清單依然還是原來的總數
起初加載首頁時，添加新待辦事項的按鈕應處于禁用狀态
儲存待辦事項的按鈕僅應在輸入待辦事項标題後處于編輯狀體
todo 應用程式概述
讓我們簡單的描述一下todo應用程式。應用程式将首先在首頁上列出待辦事項清單。有三個待辦事項會詳細列出。
這寫資料不會由服務端提供，而是從裝置檔案寫死中加載。
在首頁上，我們可以添加新的待辦事項。我們可以通過點選代辦事項的标題來通路其詳細資訊頁面。在此頁面上，我們可以編輯代辦事項标題或删除待辦事項。
克隆并設定todo 應用程式
1、首先克隆我已經推送到存儲庫這裡但未經測試的應用程式，確定你是在主分支克隆的。接下來，你需要安裝幾個工具以便能進行下面的操作，在本教程中，使用candidate已經釋出的angular 2，版本為2。
2、確定您已安裝nodejs的版本是node 4.x.x或更高版本。
3、使用以下指令安裝節點依賴項：
npm install
當然是在克隆的存儲庫中操作
npm install -g angular-cli@latest
npm install -g protractor
6.安裝所有依賴項後，使用以下指令啟動開發伺服器：
ng serve
angular 2測試相關的重要概念
端對端測試的檔案夾在e2e。 其中有一個已預備好的案列檔案，檔案名為es2/app.e2e-spec.ts。
我們這個應用僅有一個功能那就是待辦事項。為了滿足大家的好奇心或有人在想比上述更複雜的情況，試想一個需要測試訂單、使用者配置等功能更複雜的應用的場景。對此測試的場景，我将在e2e檔案夾中分别為每個待測試功能建立一個檔案夾，并将各自測試檔案放置其中。
這種情況下，我們将有兩個檔案夾分别命名為e2e/orders 和 e2e/userprofile。每個檔案夾中僅會有一個測試檔案，或者為了滿足更多待測試功能的需要而建立多個測試檔案。需要注意的一點是每個測試檔案都以word e2e-spec.ts結尾，這樣protractor測試工具才可以加載到。
ok，還是回到我們簡單的單個測試檔案。如果你略有檢視此檔案，你會發現檔案的頭部有個導入聲明(import statement)。導入是聲明若幹測試檔案中所用的普通函數是源于哪裡。然而這篇文章，我們不會使用這個，而将這個視為函數庫。
在引入聲明(import statement)之後，我們有一個描述性的代碼塊，它的兩個函數調用即 beforeeach 和它裡面的回調。
在描述代碼塊内，每個回調傳遞給 beforeeach 都需要測試。
每個測試再把裡面的回調函數傳遞給它。
讓我們用指令運作目前的測試
protractor
如果你在運作 protractor 兩個指令中的一個時有問題，請參考這裡。
./node_modules/protractor/bin/webdriver-manager update
或者
webdriver-manager update
要是目前的測試失敗，可能會在首頁看到“app works”這樣的文本提示。這并不是因為我們修改了首頁的内容就出現這種情況。
在我們開始編寫我們的測試之前，讓我們了解一些重要的通用函數，然後使用 angular 2 的端到端測試。
導航到頁面
在測試檔案中，有一個browser全局變量。它使用import語句引入
import { browser, element, by } from 'protractor/globals';
你現在可以添加上。
例如，我們使用下面語句導航到你的應用程式中可用的任何頁面
browser.get('/');
到你的首頁，和
browser.get('/users');
到users頁面。請注意，這些網址是相對的url，我們也可以使用絕對url，但是我建議使用相對url，因為如果你的域名改變，這更易于維護。
選擇元素
通常的做法是在目前頁面上選擇元素。你可以通過一個叫做element的全局變量選擇元素。它接受可以使用全局by建立的定位器。
使用選擇具有green類的p标簽例子如下
let greenparagraph = element(by.css('p.green'));
選擇多個元素，有些輕微的變化
let greenparagraphs = element.all(by.css('p.green'));
這将給出一個數組，而不是一個單一的元素。
抓取元素文本
要得到一個元素的文本，你必須先選擇它，然後調用gettext方法，想下面這樣。
let greenparagraph = element(by.css('p.green'));
let text = greenparagraph.gettext();
點選元素
點選元素可以使用下面的文法完成
let submitbutton = element(by("form .submit-button"));
submitbutton.click();
統計元素
我們也可以使用下面的文法來統計元素個數。
let blueparagraphslist = elements.all(by("p.blue"));
let count = blueparagraphslist.count();
test scenarios測試方案
對于那些不太尋常的概念，我們列出了上面覆寫的場景。
确認要做的首要三件事
當應用程式初次被加載的時候，我們有将要做三件事。
在測試檔案 e2e/app.e2e-spec.ts 的内部， beforeeach 代碼塊的下面，删除調用它的函數，并在下面添加
it("should show three todos when we first load the todo app", () => {
browser.get("/");
let todos = element.all(by.css(".todos .todo"));
expect(todos.count()).toequal(3);
})
不要忘記在這個檔案的頂部添加這個導入聲明
現在，當你運作 protractor 指令，另一個浏覽器将會被打開且迅速關閉，在你的控制台上你能看到通過測試的時候顯示為綠色。
好的!我們剛剛已經寫完了我們第一個通過 angular 2 的端到端測試。
添加一個新的待辦事項
現在進行下一個，我們可以添加一個待辦事項。讓我們用下面的代碼添加一個測試塊
it("should be able to add a new todo", () => {
let newtodoinput = element(by.css(".add-todo input[type=text]"));
newtodoinput.sendkeys("todo 4");
let newtodosubmitbutton = element(by.css(".add-todo input[type=submit]"));
newtodosubmitbutton.click();
expect(todos.count()).toequal(4);
我們在這裡要做的是在待辦事項輸入框中輸入文本并送出表單。然後我們檢查是否有四個待辦事項。 如果是的話，測試通過。
我們剛剛介紹了另一個函數sendkeys，它可以通路一個選中的元素，常用于輸入文本到輸入框這類元素中。
檢視待辦事項的詳情頁
我們應該能單擊一個待辦事項轉到該待辦事項的詳情頁，讓我們用下面的測試實作它吧。
it("should be able to click on a todo on the homepage and get to the details page", () => {
let firsttodo = element.all(by.css(".todos .todo")).first();
let firsttodotext = firsttodo.gettext();
firsttodo.click();
let inputfieldtext = element(by.css("todo input[type=text]")).getattribute("value");
expect(inputfieldtext).toequal(firsttodotext);
我們應該能删除一個待辦事項。現在讓我們試着删除一個待辦事項看看能不能成功。
我們将轉到待辦事項頁并單擊删除連結，當我們傳回首頁時，我們能看到減少了一個待辦事項。
it("should be able to delete a todo", () => {
let deletelink = element(by.csscontainingtext("span", "delete"));
deletelink.click();
let todoslist = element.all(by.css(".todos .todo"));
expect(todoslist.count()).toequal(2);
編輯一個待辦事項的标題
我們能編輯待辦事項的标題，儲存後能在首頁的待辦事項清單中顯示新标題。
it("should be able to edit a todo title", () => {
let todoinputfield = element(by.css("todo input[type=text]"));
todoinputfield.clear();
todoinputfield.sendkeys("editted todo1 title");
let savebutton = element(by.css("todo button[type=submit]"));
savebutton.click();
firsttodo = element.all(by.css(".todos .todo")).first();
expect(firsttodotext).toequal("editted todo1 title");
不能儲存空的待辦事項
當我們想儲存一個空的待辦事項時，我們無法進行操作，并且單擊禁用按鈕時，待辦事項清單依然保持同樣的長度。
it("should not be able to save an empty todo", () => {
儲存按鈕在初始化時禁用
初始化時添加待辦事項按鈕被禁用，是以我們添加下列代碼
it("should have add todo button be disabled initially", () => {
expect(newtodosubmitbutton.isenabled()).toequal(false);
當我們開始輸入時啟用儲存按鈕
隻用當我們開始輸入待辦事項标題時，待辦事項儲存按鈕才被啟用。
it("should only enable save todo button when we start typing a new todo title", () => {
let newtodoinputfield = element(by.css(".add-todo input[type=text]"));
newtodoinputfield.sendkeys("new todo 4");
expect(newtodosubmitbutton.isenabled()).toequal(true);
結論
現在，我們來總結一下 angular2 的“端對端”測試。即使您沒有任何的程式設計基礎，也可以快速上手編寫“端對端”測試。對于那些被引入代碼庫而又可能存在漏洞的部分，“端對端”測試是一個高效便捷的方法來捕獲問題所在。
我們在概念部分中介紹了一些其他方法。您可以點選這裡來浏覽這些 protractor api。并且可以在 github repository 上找到這個應用的完整版和測試版。
我希望您看完這個介紹之後，在您修改任何一行代碼之前都能興奮的開始您的前端應用測試。如果您高興，和我們交流一些您在日常測試中的高見。或者是您關于 javascript 架構及 angular2 的想法。感謝您的閱讀。
作者：佚名
來源：51cto