淘寶前端測試的平臺化之路
概述
相對前端技術快速發展的今天，測試這塊顯得有點冷清，原因有很多：可能在于測試的價值體現、在于測試的持續跟蹤、在于 UI 測試的準確性等。在淘寶 FED 有針對前端的測試平臺，也一直在探索前端測試的切入、測試工具的選擇，經過不斷的探索，覺得有必要說說目前的一些思路和進展。
歷史
淘寶 FED 的前端測試平臺名稱叫 UITest，大約在幾年前的一個冬季面世，從名字上就可以看出來起初主要定位是做 UI 的測試，檢測頁面的一些功能問題，比如：資源 404、JS 報錯、頁面性能等，對淘寶頻繁的大促活動頁面起到了質量保障作用，形式是在頁面發布時創建一條 UI 測試任務，測試結果會通過旺旺通知給開發者，自動化測試發現一些頁面的問題。
隨著時間推進，前端技術體系，開發模式、協作方式都有了變化，測試這塊僅僅覆蓋 UI 測試顯得已經不夠了，尤其 Node.js 的出現，給前端帶來了新的方向，前端慢慢開始做些后端的事情，在后端體系里：單元測試就很常見，能夠最小粒度的保證代碼的質量。因此 UITest 的平臺之路開始探索單元測試的切入，定位也發生了變化：作為前端的質量中心，覆蓋前端的各種測試。
測試的分類
測試的分類很多，從不同維度劃分可能有不同的分類，這里從前端的角度來看大致的分類：
UI 測試
UI 測試是測試頁面交互、功能的測試，有點類似集成測試，是從用戶的角度做的測試，測試的結果能反應產品的功能的完整性。比如頁面中一個按鈕 hover 后浮層是否正確展示可以是一個 UI 測試、頁面中 Tab 切換后對應的 Panel 是否正確切換，這些測試也是測試同學經常重復測試的事情；對一些基礎產品來說，每周一個迭代，這些細節的回歸難免會漏掉，對這種情況做 UI 測試時有必要，在預發時做一次自動的回歸即保證了質量，又減少了重復勞動。
單元測試
作為一個開發人員，應該保證自己代碼的正確性，保證自己提供的 API 的正確性。單元測試的對象是一般是方法、組件；對于前端組件，也會有一些 UI 上的驗證，不過測試的整體依然是組件，因此對組件級的 UI 測試也歸為單元測試；單元測試對組件 API 設計有要求，要便于測試；便于測試的代碼組件化的設計的也是友好的。因此組件化和測試也是一個相輔相成的好基友。
哪些情況可以寫單元測試呢？比如應用中的 Base 模塊、或者公用的 Popup 組件都可以添加上單元測試，每次有修改就自動跑測試用例。
測試的好處
對于寫測試用例來說，不少人覺得價值不容易體現出來。我是這么看的：對于不斷迭代的業務來說，很有必要；寫完用例后，對每次迭代都會重復的執行測 試，這種投入的性價比是很高的。如果測試總是在正確的時間運行，需求改動后測試失效也會及時的得到通知，及時的更新，整個就良性循環起來了。
平臺化之路
在梳理了測試后，UITest 重新做了定位： 前端質量中心 ，涵蓋 UI 測試和單元測試，以業務維度匯總聚合，能從整體看出業務的質量情況。
UI 測試這塊，使用一批機器做 UI 檢測，通過 webdriver 協議驅動瀏覽器跑測試用例，每個測試用例做為一個插件。
在傳統后端的開發體系里持續集成的概念已經非常成熟，比如 Github 有對應的 travis-ci ，持續集成能保證測試的及時執行，不斷的執行，保證是自動觸發的，成為流程中不可繞過的一環，保證的單元測試代碼的有效性。借鑒 travis-ci 的思路，將單元測試作為 CI 的一個過程，提供一批插件，單元測試是其中一個插件。
整體設計圖
質量體系覆蓋圖
UITest 的設計從上圖可以看出來是 開放 的 插件 體系，這樣才能最大化平臺的能力。
UITest 相關工具
UITest 做為質量中心，除了流程、系統的打通，還需要配套的工具支持，對與 單元測試 和 UI 測試 UITest 平臺分別提供工具做測試，一方面可以統一測試工程，還把控了數據收集，方面匯總。
單元測試
單元測試作為持續集成的一個命令，持續集成對外提供一個本地 ci-client，單元測試作為 ci-client 的一個插件：ci-test（基于 karma， karma 是 Angular 團隊開發的一個測試工具，他相對于 webdriver 更輕量，面向單元測試，原理是直接啟動本地瀏覽器，自動生成 runner.html 執行測試）。 ci-test 會生成一些測試的腳手架，方便的在本地做單元測試，倉庫中有了單元測試后，在 push 的時候也會執行用例，并將數據匯總到 UITest。
UI 測試
UI 測試是基于 webdriver 實現的一個框架 browserjs ，封裝了常用的 API 和相關用例規范。界內也有相關的測試框架，比如 nightwatch ，實現大致相同。對 UI 測試很有必要搞一批通用用例，可以首先對頁面做通用的檢測；對于業務特有的檢測，開發人員需要自己開發業務用例。
截圖
說了這么多，截幾張圖簡單的說明下吧~
UI 測試
CI 測試
未來
僅僅有了平臺是不夠的，需要能夠持續的 run 起來，才能發揮平臺的力量。
未來跟更多的系統打通， 跟發布系統打通 ，代碼發布時檢測對應測試是否成功，只有測試通過了才能發布。
慢慢提高開發人員的測試意識，讓測試被重視起來，將寫測試作為開發的一部分。