資訊專欄INFORMATION COLUMN
摘要：還可以自動(dòng)完成單元測(cè)試的配置，工具選型為準(zhǔn)備出發(fā)有了以上的初步了解，我們就可以準(zhǔn)備著手搭建我們自己的測(cè)試環(huán)境了，讓我們短暫休息一下，下一章見(jiàn)下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架二
搭建自己的前端自動(dòng)化測(cè)試腳手架（一）
LancerComet at 17:55, 2016.07.17.
歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。
隨著前端項(xiàng)目規(guī)模的日益膨脹，自動(dòng)化測(cè)試越來(lái)越受到廣大前端與測(cè)試朋友關(guān)注，不過(guò)可惜的是目前中文社區(qū)關(guān)于自動(dòng)化測(cè)試的內(nèi)容還不是很多，這對(duì)自動(dòng)化測(cè)試的推廣而言帶來(lái)了一定阻力。在下希望通過(guò)簡(jiǎn)短的文章，給更多的朋友一個(gè)簡(jiǎn)單的入門，能夠接觸到自動(dòng)化測(cè)試的世界。
前端的測(cè)試可以簡(jiǎn)單地看成 單元測(cè)試 與 端到端測(cè)試 ，在此我們討論的是后者。
目的釋放雙手，緩解壓力，讓瀏覽器在那兒自嗨，我們盯著屏幕喝點(diǎn)水看測(cè)試是不是全通過(guò)就好，哈。
圖片略大，請(qǐng)耐心等待……
可能有朋友以前聽(tīng)過(guò)或使用過(guò) Phantom.js 進(jìn)行測(cè)試，用起來(lái)是不是很（酸）爽的感覺(jué)啊？
在下覺(jué)得 Phantom.js 目前作為測(cè)試工具的不足之處：
就是測(cè)界面的，沒(méi)界面，心虛??；
API 有時(shí)還不能滿足測(cè)試需求；
不能使用 ES2015 編寫測(cè)試代碼；
不能良好和現(xiàn)有項(xiàng)目代碼結(jié)合，不能隨心所欲引入外部組件；
evaluate 函數(shù)內(nèi)不能引用外部變量；
調(diào)試不方便；
有測(cè)試朋友表示這貨需要專職前端維護(hù)；
……
有沒(méi)有什么方案能夠做到：
我能一遍喝著茶一邊看著它跑；
API 功能足夠，且擴(kuò)展性強(qiáng)；
能夠使用 ES2015；
能夠和現(xiàn)有項(xiàng)目結(jié)合，引入項(xiàng)目配置與外部模塊；
調(diào)試方便，比如能使用 Webstorm 或 VS Code 的控制臺(tái)；
能夠調(diào)取 IE、Firefox、Chrome 這種外部瀏覽器；
使用 BDD 與 TDD 編寫測(cè)試案例；
……
回答是，有！
為了滿足以上需求，我們將使用 Selenium 與 Nightwatch 搭建我們的測(cè)試腳手架。前者是一款 Web 的自動(dòng)化測(cè)試環(huán)境，它將幫我們搭建好測(cè)試環(huán)境，調(diào)取系統(tǒng)安裝的瀏覽器，在瀏覽器里執(zhí)行一切自動(dòng)化行為；后者是一款 Test Runner，可以簡(jiǎn)單理解為前者的控制軟件，它將提供一系列接口供我們編寫測(cè)試案例，同時(shí)也是與現(xiàn)有前端項(xiàng)目結(jié)合的橋梁。
我們將使用 selenium-standalone 安裝和管理 Selenium 而不是手工設(shè)置原版程序。selenium-standalone 是一款基于 Node.JS 的 Selenium 管理工具包，對(duì)于前端而言更加友好。
另外，Selenium 與 Nightwatch 也是 Vue-cli 生成的 Vue Webpack 項(xiàng)目的標(biāo)配組件，所以如果您在使用 Vue + Webpack 構(gòu)建項(xiàng)目，本文對(duì)您也會(huì)有所幫助，同時(shí)您可以使用 Vue-cli 幫您自動(dòng)配置好測(cè)試環(huán)境，非常方便。
準(zhǔn)備出發(fā)Vue-cli 還可以自動(dòng)完成 單元測(cè)試 的配置，工具選型為 Karma + Mocha + Chai.
有了以上的初步了解，我們就可以準(zhǔn)備著手搭建我們自己的測(cè)試環(huán)境了，讓我們短暫休息一下，下一章見(jiàn)！
下一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（二）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/8723.html
摘要：建立的配置信息。在此我們安裝的以便使用進(jìn)行測(cè)試。如果您在搭建過(guò)程中遇到困難，您可以從獲取在下已經(jīng)搭建好的接下來(lái)接下來(lái)就是專心寫測(cè)試用例了，距離成功越來(lái)越近了不過(guò)今天就到這里結(jié)束，我們下一章見(jiàn)下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架三 上一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（一）By LancerComet at 18:38, 2016.07.17. 歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 嗨，...
摘要：如果您在進(jìn)行模擬鼠標(biāo)的測(cè)試，您的鼠標(biāo)指針可能會(huì)干擾您的測(cè)試，因此建議運(yùn)行測(cè)試后將您的指針移動(dòng)至屏幕外部，以避免干擾到瀏覽器測(cè)試。 上一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（二）By LancerComet at 23:47, 2016.07.22. 歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 這是最后一章了！(???)之前我們配置好了我們的腳手架工具，現(xiàn)在可以編寫測(cè)試用例了！ 開(kāi)始編寫測(cè)試用例 ...
摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
摘要：從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后，需要一個(gè)版本控制系統(tǒng)來(lái)管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種：選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
閱讀 3237·2021-11-24 09:39
閱讀 2958·2021-11-23 09:51
閱讀 905·2021-11-18 10:07
閱讀 3556·2021-10-11 10:57
閱讀 2767·2021-10-08 10:04
閱讀 3020·2021-09-26 10:11
閱讀 1064·2021-09-23 11:21
閱讀 2813·2019-08-29 17:28
