端對端測試大概是在你的測試工具裡面最強大的一項武器了,你能夠透過這個武器來模擬使用者的使用情景、如何去和網頁、單頁應用程式互動,以此來檢查你的網頁是否運作正常。不幸的是撰寫這種測試有一定的難度,而且還要花過多的時間在雕塑單個測試單元上,接著還要花上一堆時間在建立環境跟設置,還有更多更多的事情⋯⋯。
幸好現在已經有比較方便的解決方案。我們會談到的就是 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('//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 還能夠做上更多事情。他們也提供了一些好玩的撰寫方式來降低重複撰寫類似測試的函式。想知道更多,就拜訪他們的官方網站吧。