[指南] Vue TestCafe + TypeScript 導入 E2E 測試

章節連結

在 Vue.js 的官網上,有推薦不少的測試框架如 cypress, nightwatch, puppeteer…等。不過考量其方便性及安裝的耦合性後,決定選用 TestCafe 這個 E2E 的測試框架。因為安裝簡單(僅需在 Dev 環境中安裝 testCafe )、選擇器的寫法和 HTML, CSS 非常相近、針對目前的主流框架 ( Angular, Vue, React ) 都有對應的套件來讓你取得這些 Component 的內部值。

testCafe


安裝步驟

官方網站:TestCafe

1. 若你是使用 npm ,npm install -g testcafe (全域安裝) 或是 npm install testcafe -D (在個別專案的 Dev 的開發環境下)
2. 詳細的使用說明,可以上官網自行查閱。這邊筆記下如何建立一個簡單的測試:

程式碼

以下為 TypeScript 的寫法,如果是 JavaScript 的話,寫法會略有不同,可以查閱右邊這篇的範例:testcafe-member-login-e2e.js

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

按讚加入粉絲團

延伸閱讀