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

luffyZh 發布于2019-05-29 16:57 / 2345人閱讀

摘要：還可以自動完成單元測試的配置，工具選型為準備出發有了以上的初步了解，我們就可以準備著手搭建我們自己的測試環境了，讓我們短暫休息一下，下一章見下一篇搭建自己的前端自動化測試腳手架二

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

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.

準備出發

有了以上的初步了解，我們就可以準備著手搭建我們自己的測試環境了，讓我們短暫休息一下，下一章見！

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

GPU云服務器云服務器 web前端自動化測試搭建自己的私有云搭建自己的域名郵箱搭建自己的博客網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/8723.html

搭建自己的前端自動化測試腳手架（二）

摘要：建立的配置信息。在此我們安裝的以便使用進行測試。如果您在搭建過程中遇到困難，您可以從獲取在下已經搭建好的接下來接下來就是專心寫測試用例了，距離成功越來越近了不過今天就到這里結束，我們下一章見下一篇搭建自己的前端自動化測試腳手架三上一篇：搭建自己的前端自動化測試腳手架（一）By LancerComet at 18:38, 2016.07.17. 歡迎轉載，轉載時還請保留作者署名。嗨，...

villainhr 2019-05-29 16:57 評論0 收藏0
搭建自己的前端自動化測試腳手架（三）

摘要：如果您在進行模擬鼠標的測試，您的鼠標指針可能會干擾您的測試，因此建議運行測試后將您的指針移動至屏幕外部，以避免干擾到瀏覽器測試。上一篇：搭建自己的前端自動化測試腳手架（二）By LancerComet at 23:47, 2016.07.22. 歡迎轉載，轉載時還請保留作者署名。這是最后一章了！(???)之前我們配置好了我們的腳手架工具，現在可以編寫測試用例了！開始編寫測試用例 ...

seanlook 2019-05-29 16:57 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

aristark 2019-08-29 17:24 評論0 收藏0