搭建本身的前端自動化測試腳手架（一）

搭建本身的前端自動化測試腳手架（一）

LancerComet at 17:55, 2016.07.17.
歡迎轉載，轉載時還請保留做者署名。

隨着前端項目規模的日益膨脹，自動化測試愈來愈受到廣大前端與測試朋友關注，不過惋惜的是目前中文社區關於自動化測試的內容還不是不少，這對自動化測試的推廣而言帶來了必定阻力。在下但願經過簡短的文章，給更多的朋友一個簡單的入門，可以接觸到自動化測試的世界。

前端的測試能夠簡單地當作 單元測試 與 端到端測試 ，在此咱們討論的是後者。

目的

釋放雙手，緩解壓力，讓瀏覽器在那兒自嗨，咱們盯着屏幕喝點水看測試是否是全經過就好，哈。
圖片略大，請耐心等待……

工具選擇

可能有朋友之前聽過或使用過 Phantom.js 進行測試，用起來是否是很（酸）爽的感受啊？

在下以爲 Phantom.js 目前做爲測試工具的不足之處：

• 就是測界面的，沒界面，心虛啊；

• API 有時還不能知足測試需求；

• 不能使用 ES2015 編寫測試代碼；

• 不能良好和現有項目代碼結合，不能爲所欲爲引入外部組件；

• evaluate 函數內不能引用外部變量；

• 調試不方便；

• 有測試朋友表示這貨須要專職前端維護；

• ……

有沒有什麼方案可以作到：

• 我能一遍喝着茶一邊看着它跑；

• API 功能足夠，且擴展性強；

• 可以使用 ES2015；

• 可以和現有項目結合，引入項目配置與外部模塊；

• 調試方便，好比能使用 Webstorm 或 VS Code 的控制檯；

• 可以調取 IE、Firefox、Chrome 這種外部瀏覽器；

• 使用 BDD 與 TDD 編寫測試案例；

• ……

回答是，有！

爲了知足以上需求，咱們將使用 Selenium 與 Nightwatch 搭建咱們的測試腳手架。前者是一款 Web 的自動化測試環境，它將幫咱們搭建好測試環境，調取系統安裝的瀏覽器，在瀏覽器裏執行一切自動化行爲；後者是一款 Test Runner，能夠簡單理解爲前者的控制軟件，它將提供一系列接口供咱們編寫測試案例，同時也是與現有前端項目結合的橋樑。

咱們將使用 selenium-standalone 安裝和管理 Selenium 而不是手工設置原版程序。selenium-standalone 是一款基於 Node.JS 的 Selenium 管理工具包，對於前端而言更加友好。

另外，Selenium 與 Nightwatch 也是 Vue-cli 生成的 Vue Webpack 項目的標配組件，因此若是您在使用 Vue + Webpack 構建項目，本文對您也會有所幫助，同時您可使用 Vue-cli 幫您自動配置好測試環境，很是方便。

Vue-cli 還能夠自動完成 單元測試 的配置，工具選型爲 Karma + Mocha + Chai.

準備出發

有了以上的初步瞭解，咱們就能夠準備着手搭建咱們本身的測試環境了，讓咱們短暫休息一下，下一章見！

下一篇：搭建本身的前端自動化測試腳手架（二）