在 Vue.js 的官網上，有推薦不少的測試框架如 cypress, nightwatch, puppeteer…等。不過考量其方便性及安裝的耦合性後，決定選用 TestCafe 這個 E2E 的測試框架。因為安裝簡單(僅需在 Dev 環境中安裝 testCafe )、選擇器的寫法和 HTML, CSS 非常相近、針對目前的主流框架 ( Angular, Vue, React ) 都有對應的套件來讓你取得這些 Component 的內部值。
安裝步驟
官方網站：TestCafe
1. 若你是使用 npm ，npm install -g testcafe (全域安裝) 或是 npm install testcafe -D (在個別專案的 Dev 的開發環境下)
2. 詳細的使用說明，可以上官網自行查閱。這邊筆記下如何建立一個簡單的測試：
程式碼
以下為 TypeScript 的寫法，如果是 JavaScript 的話，寫法會略有不同，可以查閱右邊這篇的範例：testcafe-member-login-e2e.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Selector } from 'testcafe' fixture('Board.vue').page('http://localhost:8080/board') // 用 test 來撰寫一個範例，回傳一個 async 函式，並自訂一個 testController 參數 // 用 Selector 選擇器來選擇網頁上的元素 // 用 await 來讓 testController 在網頁渲染後，再一步步執行動作 test('Board Page contains Person Gender', async testController => { const clickLink = Selector('.board > a') const target = Selector('.board div p:nth-child(2)') await testController.click(clickLink) await testController.expect(target.innerText).match(/male|female/) }) |
FAQ
1. [已解決]在 1.10.0 的版本中，若你採用 Babel 7 的編譯方案的話，會爆出 Error: [BABEL] unknown: Preset 錯誤。因為 1.10.0 版本仍然使用 Babel 6 作為編譯核心的緣故。在 1.10.1 的版本中，已經換成 Babel 7 。
2. 若你的應用程式 Serve / Build 的時間比較長的話，那 test-cafe 預設的等待時間僅有 1 秒 (1000ms)，你可以在參數中配合你的專案 Build 的時間作調整。
參考資料
1. TestCafe學習筆記-1：自動化測試會員登入
2. 透過 TestCafe 端對端測試 Vue.js
