端對端測試大概是在你的測試工具裡面最強大的一項武器了，你能夠透過這個武器來模擬使用者的使用情景、如何去和網頁、單頁應用程式互動，以此來檢查你的網頁是否運作正常。不幸的是撰寫這種測試有一定的難度，而且還要花過多的時間在雕塑單個測試單元上，接著還要花上一堆時間在建立環境跟設置，還有更多更多的事情⋯⋯。
幸好現在已經有比較方便的解決方案。我們會談到的就是 TestCafe，接著會以此工具展示如何用來端對端測試你的 Vue.js 應用程式。（雖然是這麼說，不過其實這個工具可以用在任何網站跟框架上。）
安裝過程
和傳統的方式不太一樣的是 TestCafe 並沒有太多相依性套件，這意味著你不需要搞得像 Selenium/WebDriver + Browser Drivers + 客戶端函式庫，因為 TestCafe 是個基於 Node.js 的套件，而這個套件已經包含了很多東西，你還不需要去變動設定。如果真要變更什麼設定，基本上都是透過終端機的指令列。
要開始用這個來測試你的 Vue 應用程式，首先透過 Yarn 或 NPM 安裝 testcafe 套件。
# Yarn
$ yarn add testcafe -D
# NPM
$ npm install testcafe --save-dev
準備
先假設你的應用程式在開發環境上能夠透過 npm run dev 建置起來，例如你正使用在 webpack-dev-server 之類的東西。
那麼先在 package.json 裡面新增一個新的腳本，用來執行 testcafe。
"scripts": {
"dev": "...",
"test": "testcafe all tests/*.test.js --app \"npm run dev\" --app-init-delay 10000 -S -s screenshots",
}
這告訴 testcafe：
all- 把系統裡面所能找到的瀏覽器都拿來當作測試對象。可選參數，你能夠透過逗號來分隔瀏覽器名稱。test/*.test.js- 在test資料夾中執行所有檔案名稱結尾為.test.js的測試。--app \"npm run dev\"- 用來啟動你應用程式的指令。--app-init-delay 10000- 等待十秒，用來延遲啟動測試，因為要等應用程式開起來。-S- 當測試失敗的時候螢幕截圖。-s screenshots- 把螢幕截圖存放在相對路徑的screenshots資料夾中。
現在我們已經準備好要進行端對端測試了。
你的第一個測試
讓我們假設你的應用程式內 <body> 裡面有個文字元素，而且這個元素上頭寫著 Hello World!，而這次的測試我們就要確保事實就是這樣。
任何和瀏覽器有所溝通的函式都會回傳一個 Promise。透過 async/await 來讓你更方便掌控測試的流程，接著你就能體悟「心靈祥和 ˊㄇˋ」 了。
// 每個測試群組都必須建立一個 fixture。
fixture(`首頁`)
// 讀取你開發應用程式的網址。
.page('http://localhost:8080');
// 建立一個新的測試：test(註釋, function(testController): <Promise>)
test('Body > 文字元素需包含 "Hello World!"', async testController => {
// 選擇 Body 裡面的文字元素。
// 在這裡你必須透過 Promise（async/await）來和瀏覽器進行互動。
const paragraphSelector = await new Selector('body > p');
// 判斷內部文字是不是就是 "Hello World!"。
await testController.expect(paragraphSelector.innerText).eql('Hello World!');
});
控制用戶輸入
在更進階一點的端對端測試中，你會需要模擬使用者的輸入動作。就像其他的測試套件ㄧ樣，TestCafe 提供了簡單的方式來應付這種情景。
test('在欄位中進行輸入', async testController => {
// 選擇輸入欄位元素（假設是 <body><input type="text"/></body>）
const inputSelector = await new Selector('body > input[type="text"]');
await testController
// 輸入 "Hello World!" 的最後一個單字。
.typeText(inputSelector, 'World!')
// 點擊欄位中的最開始的位置。caretPos 是我們希望文字游標移動到的地方。
.click(inputSelector, { caretPos: 0 })
// 輸入按鍵，SHIFT+H, e, l, l, o, 還有空白鍵，這個順序會撰寫出 "Hello "。
.keyPress('H e l l o space')
// 最終的成果應該是 "Hello World!"。
.expect(inputSelector.value).eql('Hello World!');
});
還請參考
TestCafe 還能夠做上更多事情。他們也提供了一些好玩的撰寫方式來降低重複撰寫類似測試的函式。想知道更多，就拜訪他們的官方網站吧。