搭建自己的前端自動化測試腳手架（一）
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.
準備出發
有了以上的初步瞭解，我們就可以準備著手搭建我們自己的測試環境了，讓我們短暫休息一下，下一章見！